Skip to main content

Jest with Playwright: Running Your First Test


Learn how to use Playwright with Jest framework to automate web application testing across 50+ real browsers and operating systems on LambdaTest cloud platform.

Prerequisites


  1. You can use your own project to configure and test it. For demo purposes, we are using the sample repository.
Sample repo

Download or clone the code sample for the Playwright Jest from the LambdaTest GitHub repository to run the tests.

Image View on GitHub
git clone https://github.com/LambdaTest/playwright-sample.git
cd playwright-sample
cd playwright-jest-js
  1. Install the npm dependencies.
npm install
  1. A LambdaTest Username and Access key. You can get it from your LambdaTest Profile section. Don't have an account, sign up for free.
Image
  1. To run Playwright tests, set your LambdaTest Username and Access key in the Environment Variables.

Run your Playwright tests with Jest


Navigate to the jest-playwright.config.js file in the playwright-jest-js directory and provide your LambdaTest Username and Access key.

const cp = require('child_process');
const playwrightClientVersion = cp.execSync('npx playwright --version').toString().trim().split(' ')[1];

const caps_chromium = {
'browserName': 'pw-chromium', // Browsers allowed: `Chrome`, `MicrosoftEdge`, `pw-chromium`, `pw-firefox` and `pw-webkit`
'browserVersion': 'latest',
'LT:Options': {
'platform': 'Windows 10',
'build': 'Playwright-Jest Build',
'name': 'Playwright-Jest Test on Chromium',
'user': process.env.LT_USERNAME,
'accessKey': process.env.LT_ACCESS_KEY,
'network': true,
'video': true,
'console': true,
'tunnel': false, // Add tunnel configuration if testing locally hosted webpage
'tunnelName': '', // Optional
'geoLocation': '', // country code can be fetched from https://www.lambdatest.com/capabilities-generator/
'playwrightClientVersion': playwrightClientVersion
}
};

const caps_firefox = {
'browserName': 'pw-firefox', // Browsers allowed: `Chrome`, `MicrosoftEdge`, `pw-chromium`, `pw-firefox` and `pw-webkit`
'browserVersion': 'latest',
'LT:Options': {
'platform': 'Windows 10',
'build': 'Playwright-Jest Build ',
'name': 'Playwright-Jest Test on Firefox',
'user': process.env.LT_USERNAME,
'accessKey': process.env.LT_ACCESS_KEY,
'network': true,
'video': true,
'console': true,
'tunnel': false, // Add tunnel configuration if testing locally hosted webpage
'tunnelName': '', // Optional
'geoLocation': '', // country code can be fetched from https://www.lambdatest.com/capabilities-generator/
}
};

const caps_webkit = {
'browserName': 'pw-webkit', // Browsers allowed: `Chrome`, `MicrosoftEdge`, `pw-chromium`, `pw-firefox` and `pw-webkit`
'browserVersion': 'latest',
'LT:Options': {
'platform': 'Windows 10',
'build': 'Playwright-Jest Build',
'name': 'Playwright-Jest Test on WebKit',
'user': process.env.LT_USERNAME,
'accessKey': process.env.LT_ACCESS_KEY,
'network': true,
'video': true,
'console': true,
'tunnel': false, // Add tunnel configuration if testing locally hosted webpage
'tunnelName': '', // Optional
'geoLocation': '', // country code can be fetched from https://www.lambdatest.com/capabilities-generator/
}
};

module.exports = {
connectOptions: {
chromium: {
wsEndpoint: `wss://cdp.lambdatest.com/playwright?capabilities=${encodeURIComponent(JSON.stringify(caps_chromium))}`
},
firefox: {
wsEndpoint: `wss://cdp.lambdatest.com/playwright?capabilities=${encodeURIComponent(JSON.stringify(caps_firefox))}`
},
webkit: {
wsEndpoint: `wss://cdp.lambdatest.com/playwright?capabilities=${encodeURIComponent(JSON.stringify(caps_webkit))}`
}
},
browsers: ['chromium', 'firefox', 'webkit'],
}

Pass the below command in the terminal to run the test.

npm run test

View your test results


Go to the LambdaTest Web Automation Dashboard to see your Playwright JavaScript test results.

Test across 3000+ combinations of browsers, real devices & OS.

Book Demo

Help and Support

Related Articles