Playwright + Chrome Test Runner
Example of using the Playwright Test project to run automated website tests in the cloud and display their results. Usable as an API.
src/main.ts
src/runCodegen.ts
src/transform.ts
1import { Actor } from 'apify';
2import log from '@apify/log';
3import { Dictionary } from 'apify-client';
4import fs from 'fs';
5import path from 'path';
6import { execSync } from 'child_process';
7import { collectAttachmentPaths, transformToTabular } from './transform';
8
9function ensureFolder(pathname: string) {
10 if (!fs.existsSync(pathname)) {
11 fs.mkdirSync(pathname, { recursive: true });
12 }
13}
14
15function getConfigPath(){
16 return `${__dirname}/../playwright.config.ts`;
17}
18
19function getResultDir(){
20 return `${__dirname}/../playwright-report`;
21}
22
23const getConfig = (options: {screen: {width: number, height: number}, headful: boolean, timeout: number, locale: string, darkMode: boolean, ignoreHTTPSErrors: boolean, video: string}) => {
24 const {screen, headful, timeout, ignoreHTTPSErrors, darkMode, locale, video} = options;
25
26 return `
27// Watch out! This file gets regenerated on every run of the actor.
28// Any changes you make will be lost.
29
30// Tweak your configuration through the Actor's input through the Apify console or directly in the \`input.json\` file.
31import { defineConfig } from '@playwright/test';
32export default defineConfig({
33 timeout: ${timeout},
34 use: {
35 headless: ${!headful},
36 viewport: { width: ${screen.width}, height: ${screen.height} },
37 ignoreHTTPSErrors: ${ignoreHTTPSErrors},
38 colorScheme: '${darkMode ? 'dark' : 'light'}',
39 locale: '${locale}',
40 video: '${video}',
41 },
42 reporter: [
43 ['html', { outputFolder: '${getResultDir()}', open: 'never' }],
44 ['json', { outputFile: '${getResultDir()}/test-results.json' }]
45 ],
46});`
47}
48function runTests() {
49 try {
50 execSync(`npx playwright test --config=${getConfigPath()}`, {
51 cwd: __dirname,
52 encoding: 'utf8',
53 stdio: 'inherit',
54 });
55 } catch (e) {
56 // suppress error, the report will be generated anyway
57 }
58}
59
60function updateConfig(args: {
61 screenWidth?: number,
62 screenHeight?: number,
63 headful?: boolean,
64 timeout?: number,
65 darkMode?: boolean,
66 locale?: string,
67 ignoreHTTPSErrors?: boolean,
68 video?: string,
69}) {
70 const {
71 screenWidth = 1280,
72 screenHeight = 720,
73 headful = false,
74 timeout = 60,
75 darkMode = false,
76 locale = 'en-US',
77 ignoreHTTPSErrors = true,
78 video = 'off'
79 } = args;
80
81 const config = getConfig({screen: { width: screenWidth, height: screenHeight }, headful, timeout: timeout * 1000, locale, darkMode, ignoreHTTPSErrors, video});
82 fs.writeFileSync(getConfigPath(), config, { encoding: 'utf-8' });
83}
84
85(async () => {
86 await Actor.init();
87 const input = (await Actor.getInput() ?? {}) as Dictionary;
88
89 ensureFolder(getResultDir());
90 updateConfig(input);
91
92 runTests();
93
94 const kvs = await Actor.openKeyValueStore();
95 await kvs.setValue('report', fs.readFileSync(path.join(getResultDir(), 'index.html'), { encoding: 'utf-8' }), { contentType: 'text/html' });
96 const jsonReport = JSON.parse(fs.readFileSync(path.join(getResultDir(), 'test-results.json'), { encoding: 'utf-8' }));
97 const attachmentPaths = collectAttachmentPaths(jsonReport);
98
99 const attachmentLinks = await Promise.all(attachmentPaths.map(async (x) => {
100 const attachment = fs.readFileSync(x.path);
101 await kvs.setValue(x.key, attachment, { contentType: x.type ?? 'application/octet' });
102 return {...x, url: await kvs.getPublicUrl(x.key)};
103 }));
104
105 await Actor.pushData(transformToTabular(jsonReport, attachmentLinks));
106
107 const reportURL = await kvs.getPublicUrl('report');
108 log.info('The test run has finished! The report is available in the Output tab or at the link below:');
109 console.log(reportURL);
110
111 await Actor.exit();
112})();
Playwright test template
Run your Playwright tests on the Apify platform effectively and easily. Just set up your test environment using a user-friendly UI and let the platform do the rest.
Note: This is a custom version of Playwright Test Runner Actor. Unlike the original Actor, this version reads test suite files from the tests folder and does not allow you to pass the test files via Apify input.
Features
Run your Playwright tests on the Apify platform
No more pre-commit hooks or CI/CD pipelines. Integrate your tests with the Apify Platform using a user-friendly UI and forget about the hassle of setting up your test environment.
Collect and analyze your test results online
After running the tests, the Apify platform stores the results in comprehensive datasets. You can view the results directly on the platform or download them to your local machine using a REST API.
No more problems with incompatible browser versions
Playwright Test toolkit automatically downloads the latest versions of Chromium, Firefox, and WebKit browsers and installs them in the Apify platform.
This way, you can test your websites using all the popular browsers without worrying about compatibility issues.
How to use
Just provide your test suite files in the tests
folder and run the Actor. The Actor will automatically run all the tests in the tests
folder and store the results in the KVS/dataset fields.
You can also customize the test run by specifying other options in the input, e.g. the screen size, headful/headless execution or the maximum run time.
Test Generator
You can also use the Playwright Codegen to compose your test suites even faster. Just run npm run codegen
in your project folder and record your workflow.
The code generator will automatically create a test suite file for you and save it in the tests
folder.
Resources
- Original Playwright Test Runner Actor
- Playwright testing: how to write and run E2E tests properly
- Video guide on getting scraped data using Apify API
- Integration with Make, GitHub, Zapier, Google Drive, and other apps
- Video tutorial on how to run end-to-end Playwright tests
- A short guide on how to build web scrapers using code templates
Scrape single page with provided URL with Axios and extract data from page's HTML with Cheerio.
A scraper example that uses Cheerio to parse HTML. It's fast, but it can't run the website's JavaScript or pass JS anti-scraping challenges.
Example of a Puppeteer and headless Chrome web scraper. Headless browsers render JavaScript and are harder to block, but they're slower than plain HTTP.
Web scraper example with Crawlee, Playwright and headless Chrome. Playwright is more modern, user-friendly and harder to block than Puppeteer.
Empty template with basic structure for the Actor with Apify SDK that allows you to easily add your own functionality.
Template with basic structure for an Actor using Standby mode that allows you to easily add your own functionality.