!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}return t}()||function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}(),document.documentElement.setAttribute("data-announcement-bar-initially-dismissed",function(){try{return"true"===localStorage.getItem("docusaurus.announcement.dismiss")}catch(t){}return!1}())

[Skip to main content](#__docusaurus_skipToContent_fallback)

You are viewing the **preview** v0.2 docs. View the **stable** v0.1 docs [here](/v0.1/docs/get_started/introduction/). Leave feedback on the v0.2 docs [here](https://github.com/langchain-ai/langchainjs/discussions/5386).

[

![🦜️🔗 Langchain](/v0.2/img/brand/wordmark.png)![🦜️🔗 Langchain](/v0.2/img/brand/wordmark-dark.png)

](/v0.2/)[Integrations](/v0.2/docs/integrations/platforms/)[API Reference](https://v02.api.js.langchain.com)

[More](#)

*   [People](/v0.2/docs/people/)
*   [Community](/v0.2/docs/community)
*   [Tutorials](/v0.2/docs/additional_resources/tutorials)
*   [Contributing](/v0.2/docs/contributing)

[v0.2](#)

*   [v0.2](/v0.2/docs/introduction)
*   [v0.1](https://js.langchain.com/v0.1/docs/get_started/introduction)

[🦜🔗](#)

*   [LangSmith](https://smith.langchain.com)
*   [LangSmith Docs](https://docs.smith.langchain.com)
*   [LangChain Hub](https://smith.langchain.com/hub)
*   [LangServe](https://github.com/langchain-ai/langserve)
*   [Python Docs](https://python.langchain.com/)

[Chat](https://chatjs.langchain.com)[](https://github.com/langchain-ai/langchainjs)

Search

*   [Providers](/v0.2/docs/integrations/platforms/)
    
    *   [Providers](/v0.2/docs/integrations/platforms/)
    *   [Anthropic](/v0.2/docs/integrations/platforms/anthropic)
    *   [AWS](/v0.2/docs/integrations/platforms/aws)
    *   [Google](/v0.2/docs/integrations/platforms/google)
    *   [Microsoft](/v0.2/docs/integrations/platforms/microsoft)
    *   [OpenAI](/v0.2/docs/integrations/platforms/openai)
*   [Components](/v0.2/docs/integrations/components)
    
    *   [Chat models](/v0.2/docs/integrations/chat/)
        
    *   [LLMs](/v0.2/docs/integrations/llms/)
        
    *   [Embedding models](/v0.2/docs/integrations/text_embedding)
        
    *   [Document loaders](/v0.2/docs/integrations/document_loaders)
        
        *   [File Loaders](/v0.2/docs/integrations/document_loaders/file_loaders/)
            
        *   [Web Loaders](/v0.2/docs/integrations/document_loaders/web_loaders/)
            
            *   [Cheerio](/v0.2/docs/integrations/document_loaders/web_loaders/web_cheerio)
            *   [Puppeteer](/v0.2/docs/integrations/document_loaders/web_loaders/web_puppeteer)
            *   [Playwright](/v0.2/docs/integrations/document_loaders/web_loaders/web_playwright)
            *   [Apify Dataset](/v0.2/docs/integrations/document_loaders/web_loaders/apify_dataset)
            *   [AssemblyAI Audio Transcript](/v0.2/docs/integrations/document_loaders/web_loaders/assemblyai_audio_transcription)
            *   [Azure Blob Storage Container](/v0.2/docs/integrations/document_loaders/web_loaders/azure_blob_storage_container)
            *   [Azure Blob Storage File](/v0.2/docs/integrations/document_loaders/web_loaders/azure_blob_storage_file)
            *   [Browserbase Loader](/v0.2/docs/integrations/document_loaders/web_loaders/browserbase)
            *   [College Confidential](/v0.2/docs/integrations/document_loaders/web_loaders/college_confidential)
            *   [Confluence](/v0.2/docs/integrations/document_loaders/web_loaders/confluence)
            *   [Couchbase](/v0.2/docs/integrations/document_loaders/web_loaders/couchbase)
            *   [Figma](/v0.2/docs/integrations/document_loaders/web_loaders/figma)
            *   [Firecrawl](/v0.2/docs/integrations/document_loaders/web_loaders/firecrawl)
            *   [GitBook](/v0.2/docs/integrations/document_loaders/web_loaders/gitbook)
            *   [GitHub](/v0.2/docs/integrations/document_loaders/web_loaders/github)
            *   [Hacker News](/v0.2/docs/integrations/document_loaders/web_loaders/hn)
            *   [IMSDB](/v0.2/docs/integrations/document_loaders/web_loaders/imsdb)
            *   [Notion API](/v0.2/docs/integrations/document_loaders/web_loaders/notionapi)
            *   [PDF files](/v0.2/docs/integrations/document_loaders/web_loaders/pdf)
            *   [Recursive URL Loader](/v0.2/docs/integrations/document_loaders/web_loaders/recursive_url_loader)
            *   [S3 File](/v0.2/docs/integrations/document_loaders/web_loaders/s3)
            *   [SearchApi Loader](/v0.2/docs/integrations/document_loaders/web_loaders/searchapi)
            *   [SerpAPI Loader](/v0.2/docs/integrations/document_loaders/web_loaders/serpapi)
            *   [Sitemap Loader](/v0.2/docs/integrations/document_loaders/web_loaders/sitemap)
            *   [Sonix Audio](/v0.2/docs/integrations/document_loaders/web_loaders/sonix_audio_transcription)
            *   [Blockchain Data](/v0.2/docs/integrations/document_loaders/web_loaders/sort_xyz_blockchain)
            *   [YouTube transcripts](/v0.2/docs/integrations/document_loaders/web_loaders/youtube)
    *   [Document transformers](/v0.2/docs/integrations/document_transformers)
        
    *   [Vector stores](/v0.2/docs/integrations/vectorstores)
        
    *   [Retrievers](/v0.2/docs/integrations/retrievers)
        
    *   [Tools](/v0.2/docs/integrations/tools)
        
    *   [Toolkits](/v0.2/docs/integrations/toolkits)
        
    *   [Stores](/v0.2/docs/integrations/stores/)
        

*   [](/v0.2/)
*   [Components](/v0.2/docs/integrations/components)
*   [Document loaders](/v0.2/docs/integrations/document_loaders)
*   [Web Loaders](/v0.2/docs/integrations/document_loaders/web_loaders/)
*   Playwright

Webpages, with Playwright
=========================

Compatibility

Only available on Node.js.

This example goes over how to load data from webpages using Playwright. One document will be created for each webpage.

Playwright is a Node.js library that provides a high-level API for controlling multiple browser engines, including Chromium, Firefox, and WebKit. You can use Playwright to automate web page interactions, including extracting data from dynamic web pages that require JavaScript to render.

If you want a lighterweight solution, and the webpages you want to load do not require JavaScript to render, you can use the [`CheerioWebBaseLoader`](/v0.2/docs/integrations/document_loaders/web_loaders/web_cheerio) instead.

Setup[​](#setup "Direct link to Setup")
---------------------------------------

*   npm
*   Yarn
*   pnpm

    npm install playwright

    yarn add playwright

    pnpm add playwright

Usage[​](#usage "Direct link to Usage")
---------------------------------------

    import { PlaywrightWebBaseLoader } from "langchain/document_loaders/web/playwright";/** * Loader uses `page.content()` * as default evaluate function **/const loader = new PlaywrightWebBaseLoader("https://www.tabnews.com.br/");const docs = await loader.load();

Options[​](#options "Direct link to Options")
---------------------------------------------

Here's an explanation of the parameters you can pass to the PlaywrightWebBaseLoader constructor using the PlaywrightWebBaseLoaderOptions interface:

    type PlaywrightWebBaseLoaderOptions = {  launchOptions?: LaunchOptions;  gotoOptions?: PlaywrightGotoOptions;  evaluate?: PlaywrightEvaluate;};

1.  `launchOptions`: an optional object that specifies additional options to pass to the playwright.chromium.launch() method. This can include options such as the headless flag to launch the browser in headless mode.
    
2.  `gotoOptions`: an optional object that specifies additional options to pass to the page.goto() method. This can include options such as the timeout option to specify the maximum navigation time in milliseconds, or the waitUntil option to specify when to consider the navigation as successful.
    
3.  `evaluate`: an optional function that can be used to evaluate JavaScript code on the page using a custom evaluation function. This can be useful for extracting data from the page, interacting with page elements, or handling specific HTTP responses. The function should return a Promise that resolves to a string containing the result of the evaluation.
    

By passing these options to the `PlaywrightWebBaseLoader` constructor, you can customize the behavior of the loader and use Playwright's powerful features to scrape and interact with web pages.

Here is a basic example to do it:

    import {  PlaywrightWebBaseLoader,  Page,  Browser,} from "langchain/document_loaders/web/playwright";const url = "https://www.tabnews.com.br/";const loader = new PlaywrightWebBaseLoader(url);const docs = await loader.load();// raw HTML page contentconst extractedContents = docs[0].pageContent;

And a more advanced example:

    import {  PlaywrightWebBaseLoader,  Page,  Browser,} from "langchain/document_loaders/web/playwright";const loader = new PlaywrightWebBaseLoader("https://www.tabnews.com.br/", {  launchOptions: {    headless: true,  },  gotoOptions: {    waitUntil: "domcontentloaded",  },  /** Pass custom evaluate, in this case you get page and browser instances */  async evaluate(page: Page, browser: Browser, response: Response | null) {    await page.waitForResponse("https://www.tabnews.com.br/va/view");    const result = await page.evaluate(() => document.body.innerHTML);    return result;  },});const docs = await loader.load();

* * *

#### Was this page helpful?

  

#### You can leave detailed feedback [on GitHub](https://github.com/langchain-ai/langchainjs/issues/new?assignees=&labels=03+-+Documentation&projects=&template=documentation.yml&title=DOC%3A+%3CPlease+write+a+comprehensive+title+after+the+%27DOC%3A+%27+prefix%3E).

[

Previous

Puppeteer

](/v0.2/docs/integrations/document_loaders/web_loaders/web_puppeteer)[

Next

Apify Dataset

](/v0.2/docs/integrations/document_loaders/web_loaders/apify_dataset)

Community

*   [Discord](https://discord.gg/cU2adEyC7w)
*   [Twitter](https://twitter.com/LangChainAI)

GitHub

*   [Python](https://github.com/langchain-ai/langchain)
*   [JS/TS](https://github.com/langchain-ai/langchainjs)

More

*   [Homepage](https://langchain.com)
*   [Blog](https://blog.langchain.dev)

Copyright © 2024 LangChain, Inc.