Integrating with Playwright — Airtop

Playwright is a powerful automation library that allows you to control headless browsers. Airtop provides a Playwright connector that allows you to use Playwright to automate your browser.

Installation

You will need to install the playwright-core package to use Playwright with Airtop.

$ npm i playwright-core

Usage

Once you have created a session with Airtop, you can use the Playwright library to control the browser by connecting Playwright to the CDP endpoint provided by Airtop. Please note that currently, Airtop only supports using the default browser context.

1 import { chromium } from 'playwright-core';
2 
3 const session = await client.sessions.create();
4 const playwrightBrowser = await chromium.connectOverCDP(session.data.cdpWsUrl, {
5   headers: {
6     authorization: `Bearer YOUR_API_KEY`,
7   },
8 });
9 
10 // Airtop does not currently support multiple contexts.
11 // Please be sure to use the default context.
12 const defaultContext = playwrightBrowser.contexts()[0];
13 
14 // Navigate to a new page
15 const page = await defaultContext.newPage();
16 await page.goto('https://www.airtop.ai');
17 
18 // Get the page content
19 const content = await page.content();
20 console.log(content);

If you’re not already familiar with Playwright, you might want to check out their documentation to learn more about the library and its capabilities.

Combining Playwright and Airtop Window Management

You can use Airtop’s window management functions in combination with Playwright to automate your browser. For example, you might want to create a new window, load a URL in it, use our AI APIs, but use Playwright to push a few buttons on the page.

Once you create a window, you’ll be given a window ID, which you’ll use to interact with the window using Airtop’s SDK. But you’ll also be given a targetId, which you’ll use to connect Playwright to the window.

1 const windowResponse = await client.windows.create(session.data.id, { url: "https://www.airtop.ai", waitUntil: "load" });
2 
3 // Get the target ID from the window response
4 const { targetId } = windowResponse.data;
5 
6 // Connect to the session using Playwright
7 const playwrightBrowser = await chromium.connectOverCDP(session.data.cdpWsUrl, {
8   headers: {
9     authorization: `Bearer YOUR_API_KEY`,
10   }
11 });
12 
13 // Iterate through the pages to find the one that matches the target ID
14 const pages = playwrightBrowser.contexts()[0].pages();
15 let matchingPage;
16 for (const page of pages) {
17   const cdpSession = await page.context().newCDPSession(page);
18   const { targetInfo } = await cdpSession.send('Target.getTargetInfo');
19   const pageTargetId = targetInfo.targetId;
20   if (pageTargetId === targetId) {
21     matchingPage = page;
22     break;
23   }
24 }
25 
26 // Once the page is found you can use Playwright to interact with it
27 if (matchingPage) {
28   await matchingPage.getByRole('button').click();
29 }

Common Errors

Here are some common errors you might encounter when using Playwright with Airtop when you initially connect to the CDP endpoint:

Error Code	Common Cause
400	Bad request. Check that you specify the essential parts of the request. For example, is there an “Authorization: Bearer API_KEY” header with a valid airtop API key
401	Unauthorized. Check that you are using a valid API key.
404	Not found. Check that the session ID you specified in your request is correct, and that the url path is correct
422	Unprocessable Content. Check that your inputs are well-formed. For example, is your session ID a valid UUID?
503	Service Unavailable. The session is valid, but it cannot be connected to. Check whether the session has timed out or that you haven’t already terminated it.

1	import { chromium } from 'playwright-core';
2
3	const session = await client.sessions.create();
4	const playwrightBrowser = await chromium.connectOverCDP(session.data.cdpWsUrl, {
5	headers: {
6	authorization: `Bearer YOUR_API_KEY`,
7	},
8	});
9
10	// Airtop does not currently support multiple contexts.
11	// Please be sure to use the default context.
12	const defaultContext = playwrightBrowser.contexts()[0];
13
14	// Navigate to a new page
15	const page = await defaultContext.newPage();
16	await page.goto('https://www.airtop.ai');
17
18	// Get the page content
19	const content = await page.content();
20	console.log(content);

1	const windowResponse = await client.windows.create(session.data.id, { url: "https://www.airtop.ai", waitUntil: "load" });
2
3	// Get the target ID from the window response
4	const { targetId } = windowResponse.data;
5
6	// Connect to the session using Playwright
7	const playwrightBrowser = await chromium.connectOverCDP(session.data.cdpWsUrl, {
8	headers: {
9	authorization: `Bearer YOUR_API_KEY`,
10	}
11	});
12
13	// Iterate through the pages to find the one that matches the target ID
14	const pages = playwrightBrowser.contexts()[0].pages();
15	let matchingPage;
16	for (const page of pages) {
17	const cdpSession = await page.context().newCDPSession(page);
18	const { targetInfo } = await cdpSession.send('Target.getTargetInfo');
19	const pageTargetId = targetInfo.targetId;
20	if (pageTargetId === targetId) {
21	matchingPage = page;
22	break;
23	}
24	}
25
26	// Once the page is found you can use Playwright to interact with it
27	if (matchingPage) {
28	await matchingPage.getByRole('button').click();
29	}