Playwright
Whether you're 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:
<Tab title="yarn">
```shell
yarn create playwright
```
</Tab>
<Tab title="npm">
```shell
npm init playwright@latest
```
</Tab>
</Tabs>
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.
:::
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