Introduction to Playwright
Playwright is a robust end-to-end testing framework developed by Microsoft, designed to automate web browser interactions. It supports multiple browsers such as Chromium, Firefox, and WebKit, making it versatile for cross-browser testing.
Key Features of Playwright
- Cross-Browser Automation: Test on Chromium, Firefox, and WebKit with a single API.
- Auto-Waiting: Automatically waits for the necessary elements to be ready, reducing flaky tests.
- Browser Contexts: Isolate tests within a single browser instance, mimicking multi-user scenarios.
- Network Interception: Monitor and manipulate network requests and responses.
- Emulating Devices: Test on different devices and viewport sizes.
- Trace Viewer: Debug tests using visual representation of the test execution
Installation: Install Playwright via npm: npm install playwright
Basic Script: Launch a browser, open a page, and take a screenshot:
const { chromium } = require(‘playwright’);
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto(‘https://example.com’);
await page.screenshot({ path: ‘example.png’ });
await browser.close();
})();
Annotation:
- Playwright supports tags and annotations that are displayed in the test report.
Common Annotations:
- @tag: Tags help categorise tests. For example, @tag(‘smoke’) can label a test as part of the smoke test suite.
- @skip: Skips the test. For example, @skip will prevent the test from running.
- @retry: Retries a test if it fails. For example, @retry(2) will attempt to rerun the test up to two additional times if it fails.
Emulation:
Emulation in Playwright allows you to simulate different environments, devices, or user settings to ensure that your web application works correctly across a variety of conditions. This is particularly useful for testing responsive designs, different browsers, and varying network conditions.
- Viewport Emulation:Simulates different screen sizes and resolutions.
- Device Emulation:Emulates specific devices like iPhones, iPads, and Android phones.
- User Agent Emulation:Simulates different browser user agents to test how your site behaves under various conditions.
- Geolocation Emulation:Simulates different geographic locations.
- Network Conditions Emulation:Simulates different network conditions like offline mode, slow 3G, or fast 4G
Parallelism is a feature in Playwright that allows you to run multiple tests simultaneously, which speeds up your test suite by utilising multiple CPU cores. This is particularly useful when you have a large number of tests, as it can significantly reduce the overall execution time.
Assertions: Assertions in Playwright are used to verify that the state of your application matches the expected values during test execution. They help ensure that your web application behaves correctly.
test(‘check page title’, async ({ page }) => {
await page.goto(‘https://example.com’);
await expect(page.title()).toBe(‘Expected Title’);
});
Auto-waiting: Wait for elements and actions to be ready automatically.
Debugging : Debugging tests in Playwright involves identifying and fixing issues in your automated tests to ensure they run correctly.
- Use debug Function: await page.pause();
- Run Tests in Slow Motion: const browser = await playwright.chromium.launch({ slowMo: 1000 });
- Take Screenshots: await page.screenshot({ path: ‘screenshot.png’ });
- Use console.log: console.log(‘The value of the variable is:’, variable);
Events: Listen to and handle various events on pages or contexts.
- Page Events: Events related to the page, like load, domcontentloaded, or close.
- Element Events: Events on specific elements, like click, change, or focus.
- Browser Events: Events related to the browser itself, like disconnected, close, or context-created.
Locators: locators are how you find and interact with elements on a webpage. They’re a way to target specific parts of a page so you can perform actions or make assertions.
By Selector:
- CSS Selector: page.locator(‘button.submit’) finds a button with the class submit.
- XPath Selector: page.locator(‘//button[text()=”Submit”]’) finds a button with the text “Submit”.
- By Text:page.locator(‘text=”Submit”‘) finds any element containing the text “Submit”.
- By Role:page.locator(‘role=button[name=”Submit”]’) finds a button with the name “Submit”.
Conclusion: Playwright is a powerful tool that enhances end-to-end testing by providing a comprehensive suite of features for automating web interactions across multiple browsers. Its cross-browser capabilities, auto-waiting, and robust debugging tools make it a valuable asset for any testing strategy. Key features such as browser contexts, network interception, and emulation capabilities ensure that tests are reliable and comprehensive, covering various user scenarios and conditions.
By leveraging Playwright’s ability to run tests in parallel, utilise annotations for tagging and managing test execution, and perform detailed assertions, testers can achieve faster and more reliable test results. The support for diverse locators and events further simplifies the process of interacting with web elements and handling dynamic content.
Incorporating Playwright into your testing toolkit allows for a more efficient and effective approach to ensuring web application quality, ultimately leading to a smoother user experience and more robust software. Whether you’re testing across different devices, emulating various network conditions, or debugging complex issues, Playwright provides the necessary tools to streamline and enhance your testing efforts.
