Advanced Playwright Configuration: Multi-Browser Testing and
Automating Form Submissions
Running Tests on Multiple Browsers in Playwright
To run test cases on different browsers like Chrome, Firefox, or Safari, you need to
modify the [Link] file to specify the browser for each test.
// @ts-check
const { defineConfig } = require('@playwright/test');
const config = defineConfig({
testDir: './tests', // Directory where your tests are
located
timeout: 30 * 1000, // Global timeout for each test
case (30 seconds)
expect: {
timeout: 5000, // Timeout for individual
assertions (5 seconds)
},
reporter: [['html', { open: 'never' }]], // HTML
report generation without auto-opening the report
use: {
baseURL:
'[Link] // Base
URL for your tests
browserName: 'chromium', // Default browser is
Chromium (similar to Chrome)
},
});
[Link] = config;
Running Tests on Firefox: To run tests on Firefox, update the browserName in the
[Link] as follows:
use: {
baseURL: '[Link]
browserName: 'firefox', // Set to Firefox browser
Running Tests on Safari (WebKit Engine): Playwright uses WebKit, which is derived from
Safari's engine. To run tests on WebKit:
use: {
baseURL: '[Link]
browserName: 'webkit', // Set to WebKit (Safari)
}
Running Tests in Headless Mode: Headless mode allows you to run tests without
launching the browser UI. You can enable or disable headless mode using the
headless option.
use: {
baseURL: '[Link]
browserName: 'webkit',
headless: true, // Set to true for headless mode; false
for running with UI
}
Test Timeout and Selector Timeout:
● Global Test Timeout: Each test case has a global timeout of 30 seconds.
timeout: 30 * 1000, // Global timeout of 30 seconds
● Assertion Timeout: For individual assertions, the timeout is set to 5 seconds.
expect: {
timeout: 5000, // 5 seconds for assertion timeout
}
● Selector Timeout: If a selector is not found, Playwright waits for up to 5
seconds before failing.
expect: {
timeout: 5000, // Timeout for locating selectors
}
How to type into elements on the page: Automate the Sign up page
Open “Add User” page:
Code to write/copy:
test('Verify that the user has signed up successfully', async ({
page }) => {
await [Link]('/addUser'); // This uses the baseURL
[Link](await [Link]());
await expect(page).toHaveTitle("Add User");
await [Link]("input#firstName").fill("pri");
await [Link]("input#lastName").fill("test");
await [Link]("input#email").fill("pri@[Link]");
await [Link]("input#password").fill("playwright12");
await [Link]("button#submit").click();
await
expect(page).toHaveURL("[Link]
[Link]/contactList");
});
User lands on the Contact list- home page, after we have added a user successfully!
Keep learning and keep sharing! 🙂
Priyanka
Senior QA Engineer