Playwright

Whether you are looking to get started, or already have an established codebase, Browserless aims to make the transition as easy as possible. At a high-level, you'll need to do the following:

Go over Nstbrowser Client Dash's API menu or go to: https://app.nstbrowser.io/app/api

If you haven't picked a library yet we highly recommend Playwright. It's an active open-source project with tons of contributors. Developed by Microsoft, Playwright supports multiple browsers (Chromium, Firefox, and WebKit) and multiple programming languages (Nodejs, Python, .NET, and Java), making it one of the most versatile and high-quality browser automation tools out there. ```shell pnpm create playwright ```

        <Tab title="yarn">
        ```shell
        yarn create playwright
        ```
        </Tab>

        <Tab title="npm">
        ```shell
        npm init playwright@latest
        ```
        </Tab>
    </Tabs>

```shell pip install pytest-playwright ``` As an example let's write a screenshot service that takes a picture of the website and downloads it. We'll setup a route on the /image path and take a picture of a static webpage (though you can make this configurable if you wish):

Once we have Browserless account setup, we can simply "connect" to it in our application instead of launching local Chrome.

Screenshot service with Browserless
:::warning

Launch a browser by config. (the full config refers to LaunchNewBrowser)
The kernelMilestone parameter has a fixed value of 124 currently.
This proxy parameter is required.
:::

```javascript import express from "express"; import { chromium } from "playwright";

const token = "your token"; // required
const config = {
proxy: 'your proxy', // required; input format: schema://user:password@host:port eg: http://user:password@localhost:8080
// platform: 'windows', // support: windows, mac, linux
// kernel: 'chromium', // only support: chromium
// kernelMilestone: '124', // support: 113, 120, 124
// args: {
// "--proxy-bypass-list": "detect.nstbrowser.io"
// }, // browser args
// fingerprint: {
// userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.6613.85 Safari/537.36',
// },
};

const query = new URLSearchParams({
token: token, // required
config: JSON.stringify(config),
});

const browserWSEndpoint = ws://less.nstbrowser.io/connect?${query.toString()};

const app = express();

const getBrowser = async () => chromium.connectOverCDP(browserWSEndpoint);

app.get("/image", async (req, res) => {
let browser = null;
try {
browser = await getBrowser();
const context = await browser.newContext();
const page = await context.newPage();
await page.goto("https://nstbrowser.io");
const screenshot = await page.screenshot({ fullPage: true });
res.end(screenshot, "binary");
await page.close();
await context.close();
} catch (error) {
if (!res.headersSent) {
res.status(400).send(error.message);
}
} finally {
if (browser) {
await browser.close();
}
}
});

app.listen(8080, () => console.log("Listening on PORT: 8080"));

</Tab>

<Tab title="Python">
```python
from playwright.sync_api import sync_playwright
from flask import Flask, send_file
import json
from urllib.parse import urlencode
import io

app = Flask(__name__)

token = "your token"  # required
config = {
    "proxy": "your proxy",  # required; input format: schema://user:password@host:port eg: http://user:password@localhost:8080
    # "platform": "windows",  # support: windows, mac, linux
    # "kernel": "chromium",  # only support: chromium
    # "kernelMilestone": "124",  # support: 113, 120, 124
    # "args": {
    #     "--proxy-bypass-list": "detect.nstbrowser.io"
    # },  # browser args
    # "fingerprint": {
    #     "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.6613.85 Safari/537.36",
    # },
}

query = urlencode({
    "token": token,
    "config": json.dumps(config)
})

browser_ws_endpoint = f"ws://less.nstbrowser.io/connect?{query}"

def get_browser():
    playwright = sync_playwright().start()
    return playwright.chromium.connect_over_cdp(browser_ws_endpoint)

@app.route("/image")
def get_image():
    try:
        with get_browser() as browser:
            page = browser.new_page()
            page.goto("https://nstbrowser.io")
            screenshot = page.screenshot(full_page=True)
            page.close()
        
        return send_file(
            io.BytesIO(screenshot),
            mimetype='image/png'
        )
    except Exception as e:
        return str(e), 400

if __name__ == "__main__":
    app.run(port=8080)

That's it! Now you don't have to worry about bundling Chrome or it's dependencies in production and can continue to develop your application.

Below is a sample cURL call that will use your new service to ensure it's all working:

$ curl -X GET -o temp.png http://localhost:8080/image

You can view the statistics of recent requests and the remaining session time in the Browserless menu of the Nstbrowser client. ![image.png](https://api.apidog.com/api/v1/projects/438468/resources/344338/image-preview)

Last modified: a month ago