{"id":11868,"date":"2025-06-09T14:54:58","date_gmt":"2025-06-09T14:54:58","guid":{"rendered":"https:\/\/testgrid.io\/blog\/?p=11868"},"modified":"2026-06-23T06:42:45","modified_gmt":"2026-06-23T06:42:45","slug":"playwright-testing","status":"publish","type":"post","link":"https:\/\/testgrid.io\/blog\/playwright-testing\/","title":{"rendered":"Playwright Testing: What It Is, How It Works, and How to Get Started"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Playwright is an automation library developed by Microsoft in 2020. It enables developers and testers to automate web applications across multiple browsers with ease. The framework has earned 83.6k stars and 5.2k forks on <a href=\"https:\/\/github.com\/microsoft\/playwright\" data-type=\"link\" data-id=\"https:\/\/github.com\/microsoft\/playwright\" target=\"_blank\" rel=\"noopener\">GitHub<\/a>, with detailed documentation available there to help you get started quickly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this blog, we will take a deep dive into the features of Playwright and how we can perform&nbsp;end-to-end testing&nbsp;with it, using detailed examples. But before we do that, let\u2019s first understand what Playwright actually is and what it does.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<section class=\"wp-block-custom-tldr-summary tldr-block\"><p class=\"tldr-label\">TL;DR<\/p><ul class=\"tldr-list\"><li><span>Playwright testing allows teams to validate user interactions across Chromium, Firefox, and WebKit, making cross-browser testing easier with a single automation framework.<\/span><\/li><li><span>The Playwright testing framework includes built-in capabilities such as automatic waiting, network interception, and powerful selectors, which help reduce flaky tests and improve execution reliability.<\/span><\/li><li><span>Playwright automation testing supports multiple programming languages, including JavaScript, TypeScript, Python, Java, and C#, giving development and QA teams flexibility in writing test scripts.<\/span><\/li><li><span>With features like parallel execution, browser context isolation, and headless execution, Playwright test automation helps teams run faster and more scalable test suites.<\/span><\/li><li><span>Developers can learn Playwright through structured tutorials and automation examples, making it easier to adopt Playwright automation for modern web applications.<\/span><\/li><li><span>As a modern Playwright automation tool, the framework integrates easily with CI\/CD pipelines and cloud testing platforms to support scalable automated testing workflows.<\/span><\/li><\/ul><\/section>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is a Playwright?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright is an open-source browser automation framework created by Microsoft for testing modern web applications. It lets developers and QA teams write a single test script and run it across Chromium, Firefox, and WebKit, simulating real user actions like clicking, typing, and navigating to verify that a web app works correctly.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Quick Start: Your First Playwright Test in 5 Steps<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Want to jump straight in? Here&#8217;s the fastest path from zero to a running test. Each step links to the detailed walkthrough further down this page.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Install Node.js<\/strong>: Playwright runs on Node.js. Download it from nodejs.org and confirm the installation with node -v and npm -v.<\/li>\n\n\n\n<li><strong>Create your project<\/strong>: Run mkdir my-playwright-project &amp;&amp; cd my-playwright-project &amp;&amp; npm init -y to set up a new Node.js project.<\/li>\n\n\n\n<li><strong>Install Playwright<\/strong>: Run npm install -D @playwright\/test followed by npx playwright install.<\/li>\n\n\n\n<li><strong>Write your first test<\/strong>: Create a file in the tests folder and add a test using test() and expect(). See the <a href=\"#creating-your-first-playwright-automation-script\">full example below<\/a>.<\/li>\n\n\n\n<li><strong>Run it<\/strong>: Use npx playwright test to run headless, or npx playwright test &#8211;ui to watch it run in a visible browser.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Want the full breakdown folder structure, async\/await, hooks, and a real end-to-end example? Continue reading below.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How Does Playwright Testing Work?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The Playwright testing framework makes use of a layered architecture to connect test scripts to browser engines via a communication protocol. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s see how the process works:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. Create the test script: <\/strong>You write Playwright automation scripts in languages such as TypeScript, Python, C#, Java, and JavaScript. These scripts define actions, like clicking elements, capturing network activity, or navigating pages.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. Playwright client sends commands<\/strong>: When tests run, the scripts communicate with a Playwright server (Node.js) using a WebSocket connection. The server receives the commands and translates them into instructions the browser can execute.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. Driver communicates with browser engines<\/strong>: Playwright interacts with Chromium, Firefox, and WebKit using browser-specific automation protocols such as the Chrome DevTools Protocol. This enables the browser to perform the requested actions, such as loading pages and interacting with elements.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>4. Results return to the test script<\/strong>: In the end, the browser returns execution results to the Playwright driver, which sends them back to the test script. Assertions then verify whether or not the app behaved as expected.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Key Features of Playwright Framework<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Below are some of the key features of the Playwright testing tool<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1. Cross-browser Testing<\/strong>: Playwright supports <a href=\"https:\/\/testgrid.io\/cross-browser-testing\">testing across multiple browsers<\/a>, including Chromium, Firefox, and WebKit (Safari). This cross-browser support allows you to write tests once and run them across multiple browsers without any additional configuration or setup. Playwright ensures consistent behavior and a consistent API across all supported browsers, making it easier to maintain and scale your test suite. Playwright also provides built-in support for device emulation using browsers like Safari and Chrome.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2. Headless and Headful Modes:<\/strong> Playwright allows you to run tests in headless mode (without a visible browser window) or headful mode (with a visible browser window). Headless mode is useful for running tests in CI\/CD pipelines. Headful mode is beneficial for debugging, visual inspection, or when you need to interact with the browser during test execution.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3. Automatic Waiting<\/strong>: Playwright automatically waits for elements to be ready before interacting with them, reducing the risk of test flakiness caused by timing issues. It employs intelligent waiting strategies, such as waiting for network requests to complete or DOM mutations to occur, ensuring that tests are executed reliably and consistently.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>4. Network Interception<\/strong>: Playwright provides powerful network interception capabilities, allowing you to intercept and modify network requests and responses during test execution. This feature is useful for testing scenarios involving APIs, mocking responses, simulating network conditions, or bypassing authentication mechanisms.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>5. Multiple Contexts<\/strong>: Playwright allows you to create multiple browser contexts within a single test run, effectively simulating different user sessions or environments. This feature is particularly useful for testing scenarios involving multi-user interactions, such as chat applications or collaborative tools.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>6. Powerful Selectors<\/strong>: <a href=\"https:\/\/testgrid.io\/blog\/playwright-selectors-and-locators\/\" data-type=\"link\" data-id=\"https:\/\/testgrid.io\/blog\/playwright-selectors-and-locators\/\">Playwright offers a rich set of selector strategies<\/a>, including CSS selectors, XPath, text selectors, and more. It also provides advanced selector options, such as handling dynamic elements, selecting elements based on their visibility or accessibility, and selecting elements within iframes and shadow DOMs, which are common in modern web applications.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>7. Screenshot and Video Capture<\/strong>: Playwright enables you to capture screenshots and record videos of your test runs with a single line of code. This feature is invaluable for debugging, visual regression testing, and generating visual artifacts for documentation or reporting purposes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>8. Isolation and Parallelism<\/strong>: The playwright provides built-in support for running tests in isolation and in parallel. Test isolation ensures that each test run is independent and doesn&#8217;t interfere with other tests, preventing state pollution and improving test reliability. Parallel test execution can significantly speed up your test suite by utilizing multiple CPU cores or machines, reducing overall test execution time.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Playwright Automation Framework Overview<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright&#8217;s architecture is designed to provide a robust, flexible, and high-performance framework for browser automation. Its support for multiple browser engines, isolated browser contexts, and powerful API makes it an excellent choice for web scraping, automated testing, and other browser automation tasks. The architecture ensures that tests and scripts are reliable, efficient, and easy to maintain.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Key Components and Processes<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Client Side (Automation Scripts)<\/strong>\n<ul class=\"wp-block-list\">\n<li><strong>Languages Supported:<\/strong> Playwright supports JavaScript and TypeScript &#8220;natively&#8221;, while also providing &#8220;bindings&#8221; for Java, Python, and C#&nbsp; for writing automation scripts.<\/li>\n\n\n\n<li><strong>Test Script Creation:<\/strong> Users write test scripts in their preferred language. These scripts include test cases, interaction commands, and assertions. JSON is often used for configuration and data exchange.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>WebSocket Connection<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Handshake:<\/strong> When a test script executes, it establishes a connection to the Playwright server (Node.js). This connection involves an initial handshake to establish communication.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Full Duplex (Bi-Directional) Communication:<\/strong> Once connected, there is a bi-directional communication channel between the client and the server. This is essential for sending commands to the browser and receiving responses or events in real time.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Open and Persistent Connection:<\/strong> The WebSocket connection remains open and persistent throughout the session, allowing continuous interaction between the test scripts and the browser.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Connection Closure:<\/strong> After test execution, the connection can be closed either by the client or the server, marking the end of the session.<\/li>\n<\/ul>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>Server Side (Node.js)<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Node.js Server:<\/strong> The server side is managed by a Node.js application, which orchestrates the interaction between the client scripts and the browsers.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Handling Commands and Events:<\/strong> The Node.js server receives commands from the client, processes them, and sends appropriate instructions to the browsers. It also listens for events from the browser and relays them back to the client.<\/li>\n<\/ul>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><strong>Browser Automation (CDP and CDP+)<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>CDP (Chrome DevTools Protocol):<\/strong> Playwright utilizes the CDP for interacting with Chromium-based browsers. CDP manages the render, browser, and network processes, which are essential for rendering pages, managing browser sessions, and handling network interactions.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>CDP+:<\/strong> The image also mentions CDP+ for browsers like Firefox and WebKit (Safari). Playwright extends support to these browsers by using protocols similar to CDP, ensuring a consistent API across different browsers. Each browser process (render, browser, network) is managed to simulate user interactions accurately.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Playwright Test Execution Workflow<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>The client (test script) sends instructions to the server over the WebSocket connection.<\/li>\n\n\n\n<li>The server receives these instructions and translates them into commands that can be understood by the browser instances.<\/li>\n\n\n\n<li>The server communicates with the browser instances using either CDP or CDP+, depending on the requirements.<\/li>\n\n\n\n<li>The browser instances execute the commands, such as navigating to web pages, interacting with elements, or capturing screenshots.<\/li>\n\n\n\n<li>The results or data from the browser instances are sent back to the server.<\/li>\n\n\n\n<li>The server relays the results or data back to the client over the WebSocket connection.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Also Read:<\/strong> <a href=\"https:\/\/testgrid.io\/blog\/cypress-vs-playwright\/\" data-type=\"link\" data-id=\"https:\/\/testgrid.io\/blog\/cypress-vs-playwright\/\">Playwright vs Cypress: Head-to-Head Comparison<\/a><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Playwright Automation Tutorial (Step-by-Step)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Learn how to automate web testing using Playwright in JavaScript, TypeScript, or Python with real-world examples. Includes code snippets, project folder structure, and cloud execution guides.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Below are the steps for performing Playwright installation on a Windows machine:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 1: Installation of Node.js<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright is based on Node.js, so we need Node.js installed in our system. We can do this using the official website and download the latest version (https:\/\/nodejs.org\/), after installing it be can validate the installation status using a command on the terminal.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>node -v<\/strong><br><strong>npm -v<\/strong><br>\/\/ These commands will display the installed Node.js and npm versions<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 2: Create a New Node.js Project<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this step, we will be creating a new directory for the Playwright project and navigating to it using the terminal.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>mkdir my-playwright-project<\/strong><br><strong>cd my-playwright-project<\/strong><br><strong>npm init -y<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The above commands will create a new Node.js project with a `package.json` file.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For a step-by-step walkthrough, check out our dedicated <a href=\"https:\/\/testgrid.io\/blog\/playwright-installation-guide\/\">Playwright Installation Guide<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Playwright Automation Tool Folder Structure<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">The screenshots below demonstrate how Playwright creates a default folder hierarchy when it first launches. Below is a detailed description of each of these files and folders that the Playwright framework has.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"496\" height=\"494\" src=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image8.jpg\" alt=\"\" class=\"wp-image-11871\" loading=\"lazy\" title=\"\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">The image shows the folder structure of a Playwright automation tool project. Here&#8217;s an explanation of each item in the structure:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>.github<\/strong>: This directory typically contains GitHub-specific files and configurations, such as GitHub Actions workflows.<\/li>\n\n\n\n<li><strong>node_modules<\/strong>: This directory contains all the Node.js modules installed for the project. These are the dependencies specified <span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">in<strong>&nbsp;package.json<\/strong><\/span><strong>.<\/strong><\/li>\n\n\n\n<li><strong>tests<\/strong>: This directory likely contains the Playwright test files. These files define the tests that will be executed using Playwright. We normally create a new test file in this folder.<\/li>\n\n\n\n<li><strong>tests-examples<\/strong>: This directory contains example test files or templates that can be used as references when writing new tests.<\/li>\n\n\n\n<li><strong>.gitignore<\/strong>: This file specifies which files and directories should be ignored by Git. Commonly ignored files include<strong> node_modules,<\/strong> logs, and build directories.<\/li>\n\n\n\n<li><strong>package-lock.json<\/strong>: This file is automatically generated and includes the exact versions of installed dependencies. It ensures that the project is consistently installed across different environments.<\/li>\n\n\n\n<li><strong>package.json<\/strong>: This file contains metadata about the project, including its dependencies, scripts, and other configurations. It is crucial to manage the project with Node.js.<\/li>\n\n\n\n<li><strong>playwright.config.js<\/strong>: This configuration file is specific to Playwright. It defines settings and options for running Playwright tests, such as the browser settings, test directory, timeout configurations, etc.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Best Practices for Playwright Folder Structure<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Organizing your Playwright project efficiently is key to scalable and maintainable automation. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Below are best practices for structuring your tests and configuration files:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Keep test scripts in a dedicated <code>tests<\/code> folder.<\/li>\n\n\n\n<li>Use a separate <code>tests-examples<\/code> folder for sample scripts.<\/li>\n\n\n\n<li>Maintain a <code>playwright.config.js<\/code> or <code>.ts<\/code> File at the root for all configuration settings.<\/li>\n\n\n\n<li>Include <code>.gitignore<\/code> unnecessary files  <code>node_modules<\/code> and logs.<\/li>\n\n\n\n<li>Group-related tests using subfolders <code>tests<\/code> for better clarity.<\/li>\n\n\n\n<li>Optional: Add a <code>utils<\/code> or <code>helpers<\/code> Folder for reusable functions.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Creating Your First Playwright Automation Script<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before creating the first script, we need to understand a few concepts in Playwright.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>async and await<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>async<\/strong> and <strong>await<\/strong> are used to work with asynchronous code in JavaScript. They are essential when dealing with operations that take time to complete, such as network requests or file operations.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>async<\/strong>: This keyword is used to define an asynchronous function.<\/li>\n\n\n\n<li><strong>await<\/strong>: This keyword is used to wait for a Promise to resolve before continuing execution.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Example:<\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-2c47a8162ea5444fec68c99e295f8f45\"><code>const { chromium } = require('playwright');\n\n(async () =&gt; {\n const browser = await chromium.launch();\n const page = await browser.newPage();\n await page.goto('https:\/\/www.example.com');\n \/\/ Wait for the page to load and get the title\n const title = await page.title();\n console.log(`Page title: ${title}`);\n await browser.close();\n})();<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>test()<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In Playwright&#8217;s test runner (@playwright\/test), a test is used to define individual test cases.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Example:<\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-718de0c2b9cb5222a3350f90aa482fa1\"><code>const { test, expect } = require('@playwright\/test');\n\ntest('basic test', async ({ page }) =&gt; {\nawait page.goto('https:\/\/example.com');\nconst title = await page.title();\nexpect(title).toBe('Example Domain');\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This example defines a basic test that navigates to a page and checks if the title is &#8220;Example Domain&#8221;.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>describe()&nbsp;<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Describe is used to group related tests together. This helps in organizing tests better, especially when you have a large number of tests.<\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-406bf6c8c2bdc6a7fea6f536253c7a82\"><code>const { test, expect } = require('@playwright\/test');\ntest.describe('Example Group', () =&gt; {\n test('first test', async ({ page }) =&gt; {\n   await page.goto('https:\/\/example.com');\n   const title = await page.title();\n   expect(title).toBe('Example Domain');\n });\n\n test('second test', async ({ page }) =&gt; {\n   await page.goto('https:\/\/example.com');\n   const content = await page.textContent('h1');\n   expect(content).toBe('Example Domain');\n });\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Hooks&nbsp;<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hooks are functions that are executed at specific points in the test lifecycle. Common hooks include<strong> beforeAll, afterAll, beforeEach, and afterEach.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-c43086c15836d20d167b83e109c999a1\"><code><strong>const { test, expect } = require('@playwright\/test');\n\ntest.describe('Example Group with Hooks', () =&gt; {\n test.beforeAll(async () =&gt; {\n &nbsp; console.log('Setup before all tests');\n });\n\n test.afterAll(async () =&gt; {\n &nbsp; console.log('Cleanup after all tests');\n });\n\n test.beforeEach(async ({ page }) =&gt; {\n &nbsp; await page.goto('https:\/\/example.com');\n });\n\n test.afterEach(async ({ page }) =&gt; {\n &nbsp; await page.close();\n });\n\n test('test with hooks', async ({ page }) =&gt; {\n &nbsp; const title = await page.title();\n &nbsp; expect(title).toBe('Example Domain');\n });\n});<\/strong><\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Assertions&nbsp;<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Assertions are used to verify that the application behaves as expected. Playwright uses except for assertions. The expect function takes an actual value and provides various matcher methods to assert against the expected value.<\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-a5d93dd0cfa3225d8182dd13b640b24c\"><code><strong>const { test, expect } = require('@playwright\/test');\n\ntest('assertion test', async ({ page }) =&gt; {\n await page.goto('https:\/\/example.com');\n const title = await page.title();\n expect(title).toBe('Example Domain');\n\n const content = await page.textContent('h1');\n expect(content).toBe('Example Domain');\n});<\/strong><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Automate Your First Playwright Test Case<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s create a .spec file \u2018testGrid.spec.js\u2019 under the folder tests.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We are covering the scenario where the user can log in, navigate to the codeless automation section, verify the navigation to a new tab by clicking on the link&nbsp; \u2018Real Device Cloud\u2019, return to the parent page, and log out successfully<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let\u2019s take Playwright&nbsp; testing examples to test end-to-end test scenarios from login to the site https:\/\/testgrid.io\/ with valid credentials, navigate to the codeless automation section, verify the navigation to a new tab by clicking on the link&nbsp; \u2018Real Device Cloud\u2019, return to the parent page, and log out successfully<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Test Scenario<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Visit the Site <a href=\"https:\/\/testgrid.io\/\">https:\/\/testgrid.io\/<\/a><\/li>\n\n\n\n<li>Log in to the site with valid credentials&nbsp;<\/li>\n\n\n\n<li>Verify user is logged in by varying the text&nbsp; \u201cDashboard.\u201d<\/li>\n\n\n\n<li>Click on the \u2018Codeless\u2019&nbsp; link under the Automation section<\/li>\n\n\n\n<li>Verify the text \u201cLet&#8217;s get you started with codeless automation.\u201d<\/li>\n\n\n\n<li>Open The Link &#8216;<em>Real Device Cloud<\/em>&#8216; in a New Tab, and then go back to the parent page<\/li>\n\n\n\n<li>Verify text \u201cSelenium\u201d to make sure the user is back to the parent page<\/li>\n\n\n\n<li>Log out of the application<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Write a simple Playwright&nbsp; test in the file \u2018<strong>testGrid.spec.js<\/strong>\u2019 which covers the following functionality for the website <a href=\"https:\/\/testgrid.io\/\">https:\/\/testgrid.io\/<\/a><\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-23c582d412ca9077076468f14ad43935\"><code><strong>const<\/strong> { chromium, test, expect } = require(\"@playwright\/test\");\n\ntest(\"Testgrid.io Scenario\", <strong>async<\/strong> ({ browser }) =&gt; {\n<strong>const<\/strong> context = <strong>await<\/strong> browser.newContext();\n<strong>const<\/strong> page = <strong>await<\/strong> context.newPage();\n\n\/\/ 1. Visit the Site https:\/\/testgrid.io\/\n<strong>await<\/strong> page.goto(\"https:\/\/public.testgrid.io\/\");\n\n\/\/ 2. Login into the site with valid credentials\n<strong>await<\/strong> page.fill('input&#91;name=\"email\"]', \"jarryliurobert@gmail.com\");\n<strong>await<\/strong> page.fill('input&#91;name=\"password\"]', \"Test@1234\");\n<strong>await<\/strong> page.click('button:has-text(\"Sign in\")');\n<strong>await<\/strong> page.waitForTimeout(7000);\n\n\n&nbsp;\/\/ 3. Verify user is logged in by verifying the text \"Dashboard\"\n<strong>await<\/strong> expect(page.locator(\"text=Dashboard\")).toBeVisible();\n\n\/\/ 4. Click on 'Codeless' link under Automation section\n<strong>await<\/strong> page.click(\"text=Codeless\");\n\n\/\/ 5. Verify the text \"Let's get you started with codeless automation\"\n<strong>await<\/strong> expect(\n&nbsp; page.locator(\"text=Lets get you started with codeless automation\")\n).toBeVisible();\n<strong>await<\/strong> page.click('&#91;id=\"testcase_back_button\"]');\n\n\/\/ 6. Open the link 'Real Device Cloud' in a new tab and then back to the parent page\n<strong>const<\/strong> &#91;newPage] = <strong>await<\/strong> Promise.all(&#91;\n&nbsp; context.waitForEvent(\"page\"),\n&nbsp; page.click(\"text=Real Device Cloud\"),\n]);\n<strong>await<\/strong> newPage.waitForLoadState(\"domcontentloaded\");\n<strong>await<\/strong> newPage.close();\n<strong>await<\/strong> page.bringToFront();\n\n\/\/ 7. Verify the text \"Selenium\" to make sure the user is back on the parent page\n<strong>await<\/strong> expect(page.locator(\"text=Selenium\")).toBeVisible();\n\n\/\/ 8. Logout from the application\n<strong>await<\/strong> page.click('&#91;data-toggle=\"dropdown\"]');\npage.click(\"text=Logout\");\n<strong>await<\/strong> expect(page.locator(\"text=ForgotPassword?\")).toBeVisible();\n<strong>await<\/strong> context.close();\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Code walkthrough<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To understand the Playwright testing example script in detail. Let&#8217;s undertake the above code walkthrough.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Imports the necessary Playwright modules for browser automation, testing, and assertions.<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-dba2a19c5a911e9000d6c7b5d621d7de\"><code>Import Required Modules:\nconst { chromium, test, expect } = require(\"@playwright\/test\");<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Defines a test named &#8220;Testgrid.io Scenario&#8221; that uses a browser instance.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Define a Test Scenario<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-22e2885ee8612695acd121ca10c578b9\"><code>test(\"Testgrid.io Scenario\", <strong>async<\/strong> ({ browser }) =&gt; {<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Set up Browser Context and Page: <\/strong>Creates a new browser context and a new page within that context.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-f53dc3364277bdbf73f389dfa9c5b657\"><code><strong>const<\/strong> context = <strong>await<\/strong> browser.newContext();\n<strong>const<\/strong> page = <strong>await<\/strong> context.newPage();<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Navigate to Testgrid.io: <\/strong>Opens the Testgrid.io website.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-44dd9ddbafad4aaeee77a0c6a824e2f4\"><code><strong>await<\/strong> page.goto(\"https:\/\/public.testgrid.io\/\");<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Log in to the Site: <\/strong>Fill in the login form with email and password, clicks the sign-in button, and waits for 7 seconds.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-e816208fbad4e06eafd9af0af119daf3\"><code><strong>await<\/strong> page.fill('input&#91;name=\"email\"]', \"xxxxx@gmail.com\");\n<strong>await<\/strong> page.fill('input&#91;name=\"password\"]', \"xxxx@1234\");\n<strong>await<\/strong> page.click('button:has-text(\"Sign in\")');\n<strong>await<\/strong> page.waitForTimeout(7000);<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Verify Successful Login: <\/strong>Checks if the &#8220;Dashboard&#8221; text is visible, indicating a successful login.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-22b3bc2c7bf1ad3fe051af183989d8d8\"><code><strong>await<\/strong> expect(page.locator(\"text=Dashboard\")).toBeVisible();<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Navigate to Codeless Automation:<\/strong> Click on the &#8220;Codeless&#8221; link under the Automation section.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-df6d09f9330f1b6e5f5b261996165b85\"><code><strong>await<\/strong> page.click(\"text=Codeless\");<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Verify Codeless Automation Page: <\/strong>Verifies the presence of the text related to codeless automation and clicks the back button.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-0865b44c4c0ff5d89a31834d04449757\"><code><strong>await<\/strong> expect(page.locator(\"text=Lets get you started with codeless automation\")).toBeVisible();\n<strong>await<\/strong> page.click('&#91;id=\"testcase_back_button\"]');<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Open Real Device Cloud in New Tab:<\/strong> Opens the &#8220;Real Device Cloud&#8221; link in a new tab, waits for the new page to load, closes the new page, and returns to the original page.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-39a7da3acadd52c447a3fc308d6cded8\"><code><strong>const<\/strong> &#91;newPage] = <strong>await<\/strong> Promise.all(&#91;\n&nbsp; context.waitForEvent(\"page\"),\n&nbsp; page.click(\"text=Real Device Cloud\"),\n]);\n<strong>await<\/strong> newPage.waitForLoadState(\"domcontentloaded\");\n<strong>await<\/strong> newPage.close();\n<strong>await<\/strong> page.bringToFront();<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Verify Return to Parent Page:<\/strong> Checks if the &#8220;Selenium&#8221; text is visible to confirm the user is back on the parent page.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-379a24f8bed920d4b6f53d1c186deed9\"><code><strong>await<\/strong> expect(page.locator(\"text=Selenium\")).toBeVisible();<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Logout from the Application: <\/strong>Clicks on the drop-down menu, selects &#8220;Logout&#8221;, and closes the browser context.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-007f8d8cb205cd093a985b294658c9ce\"><code><strong>await<\/strong> page.click('&#91;data-toggle=\"dropdown\"]');\npage.click(\"text=Logout\");await expect(page.locator(\"text=Forgot Password?\")).toBeVisible();\n<strong>await<\/strong> context.close();<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Executing Playwright Test Cases Locally<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To execute the test cases, you can use Playwright commands in your terminal. Playwright supports both headed mode (where you can see the browser window) and headless mode (where tests run in the background without a visible browser window).&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the section below, you will see how we can run Playwright test automation in headed and headless mode.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Running Tests in Headed Mode<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In the headless mode, you can see that test cases are executed in the visible browser window.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open your terminal.<\/li>\n\n\n\n<li>Navigate to the directory where your Playwright tests are located.<\/li>\n\n\n\n<li>Run the command to execute the tests in headless mode.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Run the command npx playwright test &#8211;ui or yarn playwright test &#8211;ui. As we run the command, it will open a screen below. Click on the .spec file \u2018testGrid.spec.js\u2019 to run the test case in headless mode.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1999\" height=\"1001\" src=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image3.jpg\" alt=\"playwright Run Test Cases In Headed Mode:\" class=\"wp-image-11872\" loading=\"lazy\" title=\"\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">When we click on <strong><em>testGrid.spec.js, <\/em><\/strong><em>the test<\/em> case starts executing, and finally, the test case passes successfully.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Below are the screenshots of the test case execution locally<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1999\" height=\"1059\" src=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image6-2.jpg\" alt=\"\" class=\"wp-image-11873\" loading=\"lazy\" title=\"\"><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1999\" height=\"955\" src=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image5-4.jpg\" alt=\"\" class=\"wp-image-11874\" loading=\"lazy\" title=\"\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">In the final step, the user logs out of the application<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1999\" height=\"962\" src=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/playwright-testing-tutorial.jpg\" alt=\"\" class=\"wp-image-11875\" loading=\"lazy\" title=\"\"><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Running Tests in Headless Mode<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">By default, Playwright runs in &#8220;headless mode,&#8221; where the browser runs in the background without opening a visible browser window.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Command to run the test case in headless mode: npx playwright test or yarn playwright test<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Run the command<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2018npx playwright test tests\/testGrid.spec.js\u2019. As you execute this command, the test case starts executing in headless mode.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In the screenshot below, you can see the test case start executing in headless mode in the Chrome browser. Once execution is completed, the test cases are passed in Chrome&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1876\" height=\"722\" src=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image7-2.jpg\" alt=\"playwright Run Test case In Headless Mode\" class=\"wp-image-11876\" loading=\"lazy\" title=\"\"><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Run the command &nbsp;\u2018npx playwright show-report\u2019 Below the attached HTML report&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1999\" height=\"1691\" src=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/playwright-test.jpg\" alt=\"\" class=\"wp-image-11877\" loading=\"lazy\" title=\"\"><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Best Practices for Playwright Automation<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Below are a few best practices of Playwright. By following these best practices, you can streamline your testing process, enhance reliability, and maintain code readability:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Using Playwright Assertions<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright provides built-in assertions like <strong>toBeVisible<\/strong>, <strong>toHaveText<\/strong>, and <strong>toHaveURL<\/strong> to validate the application state after user interactions. This simplifies test logic and improves maintainability.<\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-dca323fdfd0392bfb6ea83308850acb8\"><code>test('login form is displayed', <strong>async<\/strong> ({ page }) =&gt; {\n&nbsp; <strong>await<\/strong> page.goto('https:\/\/your-app.com\/login');\n&nbsp; <strong>await<\/strong> expect(page.locator('#username')).toBeVisible();\n&nbsp; <strong>await<\/strong> expect(page.locator('#password')).toBeVisible();&nbsp;&nbsp;<strong>await<\/strong> expect(page).toHaveText('Thank you for your order!')\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Applying Playwright Wait Strategies<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright offers functionalities like <strong>waitForSelector<\/strong>, <strong>waitForNavigation<\/strong>, and expect with timeouts to ensure elements are loaded and ready before interaction. This improves test reliability.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Example<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use await page.<strong>waitForSelector<\/strong>(&#8216;#submit-button&#8217;) before clicking the submit button.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Ensuring Independent Playwright Tests<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Each test should function independently, with its own data, cookies, and local storage. This makes tests more reliable and easier to <a href=\"https:\/\/testgrid.io\/blog\/playwright-debug\/\" data-type=\"link\" data-id=\"https:\/\/testgrid.io\/blog\/playwright-debug\/\">debug<\/a>. Playwright offers hooks like <strong>beforeEach<\/strong> and <strong>afterEach<\/strong> to set up and tear down test environments.<\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-bf924af1852b74bdc7d8b01f214f615e\"><code>test.beforeEach(<strong>async<\/strong> ({ page }) =&gt; {\n&nbsp; \/\/ Login before each test\n&nbsp; <strong>await<\/strong> page.goto('https:\/\/your-app.com\/login');\n&nbsp; <strong>await<\/strong> page.fill('#username', 'user1');\n&nbsp; <strong>await<\/strong> page.fill('#password', 'password123');\n&nbsp; <strong>await<\/strong> page.click('button&#91;type=\"submit\"]');\n});\ntest('profile page loads correctly', <strong>async<\/strong> ({ page }) =&gt; {\n&nbsp; \/\/ Navigate to profile page after login (already done in beforeEach)\n&nbsp; <strong>await<\/strong> page.goto('https:\/\/your-app.com\/profile');\n&nbsp; \/\/ Assert elements on profile page\n&nbsp; <strong>await<\/strong> expect(page).toHaveURL(\/profile\/);\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Leveraging Playwright Tooling<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright offers tools <span style=\"box-sizing: border-box; margin: 0px; padding: 0px;\">such as&nbsp;<strong>Playwright Inspector&nbsp;<\/strong>for visually debugging tests<\/span>, <strong>Trace Viewer <\/strong>for analyzing test failures, and <strong>Codegen<\/strong> for generating test code from recorded browser actions.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Using Chaining &amp; Filtering in Playwright<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Locators can be combined to focus the search on a specific section of the page.<\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-7ed64c71e928b733743c04a2e4e331d7\"><code><strong>const<\/strong> product = page.getByRole('listitem').filter({ hasText: 'Product 2' });<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">You can also use filter locators by text or by another locator.<\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-643fef1e13b201514736ce4f17bfbf2e\"><code><strong>await<\/strong> page\n&nbsp; &nbsp; .getByRole('listitem')\n&nbsp; &nbsp; .filter({ hasText: 'Product 2' })\n&nbsp; &nbsp; .getByRole('button', { name: 'Add to cart' })\n&nbsp; &nbsp; .click();<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Running Playwright Tests in the Cloud with TestGrid<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Before diving deep into how to run Playwright test cases in the cloud, the following requirements should be met<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Pre-Execution Setup for Cloud Testing<\/strong><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\">Install Node.js for Playwright<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Node.js<\/strong> (version 14 or later). Confirm by running<br><strong>node -v<\/strong><\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>npm -v<\/strong><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Install Playwright Framework<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Install the Playwright test framework if it\u2019s not already set up.<\/li>\n\n\n\n<li>Run the following commands in your terminal<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>npm install -D @playwright\/test<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>npx playwright install<\/strong><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Set Up TestGrid for Cloud Execution<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sign up or log in to your TestGrid account at <a href=\"https:\/\/testgrid.io\">testgrid.io<\/a>.<\/li>\n\n\n\n<li>Obtain the following credentials from your TestGrid dashboard\n<ul class=\"wp-block-list\">\n<li><strong>User Token<\/strong>: Your unique authentication token.<\/li>\n\n\n\n<li><strong>SELENIUM_REMOTE_URL<\/strong>: The URL for TestGrid\u2019s remote browser execution.<\/li>\n\n\n\n<li><strong>Device ID (UDID)<\/strong>: The unique identifier for the device or browser you\u2019ll use for testing.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Set Up and Execute Test Case In the Cloud<\/strong><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Before you can execute your Playwright test cases on TestGrid\u2019s cloud infrastructure, a proper setup is essential to ensure seamless remote testing. Below are the key steps to prepare your environment and configure the necessary components.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 1: Access the Playwright Section<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Log in to your TestGrid account.<\/li>\n\n\n\n<li>From the sidebar, select the <strong>Playwright<\/strong> option. Here, you\u2019ll find device selections, setup details, and the command for remote test execution.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 2: Set Up Your Test Project<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can either build a new Playwright project or use a sample project from the TestGrid dashboard.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"494\" src=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/execute-playwright-tests-in-cloud-1024x494.png\" alt=\"set up project for execute playwright test\" class=\"wp-image-14100\" loading=\"lazy\" title=\"\" srcset=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/execute-playwright-tests-in-cloud-1024x494.png 1024w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/execute-playwright-tests-in-cloud-300x145.png 300w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/execute-playwright-tests-in-cloud-768x370.png 768w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/execute-playwright-tests-in-cloud-1536x741.png 1536w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/execute-playwright-tests-in-cloud-150x72.png 150w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/execute-playwright-tests-in-cloud.png 1999w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Download the sample project and navigate to its directory in your terminal:<br>cd ~\/Downloads\/sample_playwright_project, Or Create your own folder, install Playwright, and create a test case under this folder.<\/li>\n\n\n\n<li>Verify that the directory includes a valid playwright.config.<strong>ts<\/strong> or playwright.config.<strong>js<\/strong> file.<\/li>\n\n\n\n<li>In our case, we are creating our own project by installing Playwright and creating the test cases inside it.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>We are using the scenario below to automate and execute the same test case in the cloud.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Test Case 1<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Searches for the <strong>TestGrid<\/strong> website on DuckDuckGo.<\/li>\n\n\n\n<li>Click the search result titled: <strong>&#8220;AI-powered End-to-End Testing Platform &#8211; TestGrid&#8221;<\/strong>.<\/li>\n\n\n\n<li>Navigates to the <strong>Sign In<\/strong> page.<\/li>\n\n\n\n<li>Enter credentials:\n<ul class=\"wp-block-list\">\n<li><strong>Email:<\/strong> demo@demo.com<\/li>\n\n\n\n<li><strong>Password:<\/strong> demo<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>Click the <strong>Sign In<\/strong> button to attempt login.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Test Case 2<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Searches for the <strong>DemoQA<\/strong> website on DuckDuckGo.<\/li>\n\n\n\n<li>Click on the <strong>&#8220;DEMOQA&#8221;<\/strong> link from the search results.<\/li>\n\n\n\n<li>Navigates to the <strong>&#8220;Elements&#8221;<\/strong> section.<\/li>\n\n\n\n<li>Clicks on the <strong>&#8220;Check Box&#8221;<\/strong> item.<\/li>\n\n\n\n<li>Interacts with a specific node in the checkbox tree structure.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Code snippet<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code has-white-color has-black-background-color has-text-color has-background has-link-color wp-elements-41d13c3db4ac70af1bf7903bc59e9c60\"><code>\/\/ @ts-check\nconst { test, expect } = require('@playwright\/test');\ntest('TestGrid website on DuckDuckGo.', async ({ page }) =&gt; {\n await page.goto('https:\/\/duckduckgo.com\/?t=h_&amp;q=https%3A%2F%2Ftestgrid.io%2F&amp;ia=web', { waitUntil: 'load' });\n await page.goto('https:\/\/duckduckgo.com\/?t=h_&amp;q=https%3A%2F%2Ftestgrid.io%2F&amp;ia=web', { waitUntil: 'load' });\n await page.getByRole('link', { name: 'AI powered End-to-End Testing Platform - TestGrid', exact: true }).click();\n await page.getByRole('link', { name: 'Sign in' }).click();\n await page.getByPlaceholder('Email').click();\n await page.getByPlaceholder('Email').fill('demo@demo.com');\n await page.getByPlaceholder('Password').click();\n await page.getByPlaceholder('Password').fill('demo');\n await page.getByRole('button', { name: 'Sign In' }).click();\n});\ntest('DemoQA website on DuckDuckGo.', async ({ page }) =&gt; {\n await page.goto('https:\/\/duckduckgo.com\/?t=h_&amp;q=https%3A%2F%2Fdemoqa.com%2F&amp;ia=web', { waitUntil: 'load' });\n await page.goto('https:\/\/duckduckgo.com\/?t=h_&amp;q=https%3A%2F%2Fdemoqa.com%2F&amp;ia=web', { waitUntil: 'load' });\n await page.getByRole('link', { name: 'DEMOQA', exact: true }).first().click();\n await page.getByRole('heading', { name: 'Elements' }).click();\n await page.getByText('Check Box').click();\n await page.locator('#tree-node').getByRole('img').nth(3).click();\n});<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 3: Run Tests Remotely<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Copy the remote execution command from the TestGrid dashboard and run it in your terminal within the project directory.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"504\" src=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/execute-playwright-test-in-minutes-using-Testgrid-1024x504.png\" alt=\"execute playwright test in minutes with testgrid\" class=\"wp-image-14099\" loading=\"lazy\" title=\"\" srcset=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/execute-playwright-test-in-minutes-using-Testgrid-1024x504.png 1024w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/execute-playwright-test-in-minutes-using-Testgrid-300x148.png 300w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/execute-playwright-test-in-minutes-using-Testgrid-768x378.png 768w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/execute-playwright-test-in-minutes-using-Testgrid-1536x756.png 1536w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/execute-playwright-test-in-minutes-using-Testgrid-150x74.png 150w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/execute-playwright-test-in-minutes-using-Testgrid.png 1999w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Here\u2019s an example<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">SELENIUM_REMOTE_URL=http:\/\/{your_domain}.testgrid.io\/browserrun{port} \\<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">SELENIUM_REMOTE_CAPABILITIES='{<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&#8220;browserName&#8221;: &#8220;chrome&#8221;,<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&#8220;tg:udid&#8221;: &#8220;101&#8221;,<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;&nbsp;&#8220;tg:userToken&#8221;: &#8220;{User_token}&#8221;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">}&#8217; \\<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">npx playwright test &#8211;headed<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Replace <\/strong>{your_domain}<strong>, <\/strong>{port}<strong>, and <\/strong>{User_token}<strong> with your specific TestGrid credentials.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As soon as we trigger the above test command from the terminal, the test case starts executing on the local machine and the TestGrid cloud environment.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Step 4: Check Your Results<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">After running the above command, we can see the report in two convenient ways:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Locally<\/strong>: See execution logs in your terminal and access a generated HTML report.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"151\" src=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image11-1024x151.png\" alt=\"output of generated HTML report\" class=\"wp-image-14101\" loading=\"lazy\" title=\"\" srcset=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image11-1024x151.png 1024w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image11-300x44.png 300w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image11-768x113.png 768w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image11-1536x227.png 1536w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image11-150x22.png 150w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image11.png 1999w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"141\" src=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image8-min-1024x141.png\" alt=\"HTML report\" class=\"wp-image-14102\" loading=\"lazy\" title=\"\" srcset=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image8-min-1024x141.png 1024w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image8-min-300x41.png 300w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image8-min-768x106.png 768w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image8-min-1536x212.png 1536w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image8-min-150x21.png 150w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image8-min.png 1999w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Test Case Execution TestGrid<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once the execution starts, you will see that the browser \u2018chrome\u2019 is connected, and the test case starts execution.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"510\" src=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/cloud-Test-Case-Execution-TestGrid-1024x510.png\" alt=\"playwright testing selecting devices in testgrid\" class=\"wp-image-14103\" loading=\"lazy\" title=\"\" srcset=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/cloud-Test-Case-Execution-TestGrid-1024x510.png 1024w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/cloud-Test-Case-Execution-TestGrid-300x149.png 300w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/cloud-Test-Case-Execution-TestGrid-768x383.png 768w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/cloud-Test-Case-Execution-TestGrid-1536x765.png 1536w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/cloud-Test-Case-Execution-TestGrid-150x75.png 150w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/cloud-Test-Case-Execution-TestGrid.png 1999w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Below are some of the screenshots of the <strong>TestGrid cloud,<\/strong> where you can see the test case mentioned above executing.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"514\" src=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image2-min-1024x514.png\" alt=\"\" class=\"wp-image-14104\" loading=\"lazy\" title=\"\" srcset=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image2-min-1024x514.png 1024w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image2-min-300x151.png 300w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image2-min-768x386.png 768w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image2-min-1536x771.png 1536w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image2-min-150x75.png 150w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image2-min.png 1999w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"506\" src=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/duckduckgo-1024x506.png\" alt=\"\" class=\"wp-image-14105\" loading=\"lazy\" title=\"\" srcset=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/duckduckgo-1024x506.png 1024w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/duckduckgo-300x148.png 300w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/duckduckgo-768x379.png 768w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/duckduckgo-1536x758.png 1536w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/duckduckgo-150x74.png 150w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/duckduckgo.png 1999w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"489\" src=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image12-min-1024x489.png\" alt=\"\" class=\"wp-image-14106\" loading=\"lazy\" title=\"\" srcset=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image12-min-1024x489.png 1024w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image12-min-300x143.png 300w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image12-min-768x367.png 768w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image12-min-1536x734.png 1536w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image12-min-150x72.png 150w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image12-min.png 1999w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"508\" src=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image4-min-1024x508.png\" alt=\"\" class=\"wp-image-14107\" loading=\"lazy\" title=\"\" srcset=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image4-min-1024x508.png 1024w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image4-min-300x149.png 300w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image4-min-768x381.png 768w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image4-min-1536x761.png 1536w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image4-min-150x74.png 150w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/image4-min.png 1999w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Dashboard<\/strong>:&nbsp;&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To view the report in the Test Grid dashboard, follow the Path: Automations &#8211;&gt; Select Browser Chrome-101. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You will see the screen below<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"433\" src=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/performance-for-playwright-testing-1024x433.png\" alt=\"playwright testing demo\" class=\"wp-image-14108\" loading=\"lazy\" title=\"\" srcset=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/performance-for-playwright-testing-1024x433.png 1024w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/performance-for-playwright-testing-300x127.png 300w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/performance-for-playwright-testing-768x325.png 768w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/performance-for-playwright-testing-1536x650.png 1536w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/performance-for-playwright-testing-150x63.png 150w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/performance-for-playwright-testing.png 1999w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Click on the first executed session from the screenshot below, and you will see the test case that we executed displayed with VIDEO<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"371\" src=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/playwright-testing-1024x371.png\" alt=\"playwright testing step in testgrid\" class=\"wp-image-14109\" loading=\"lazy\" title=\"\" srcset=\"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/playwright-testing-1024x371.png 1024w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/playwright-testing-300x109.png 300w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/playwright-testing-768x279.png 768w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/playwright-testing-1536x557.png 1536w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/playwright-testing-150x54.png 150w, https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/playwright-testing.png 1999w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh7-rt.googleusercontent.com\/docsz\/AD_4nXdHvIt8RfronntRs8MU-51_AbBX5LeIAep_2UAJh8EoXQ-7UwYj5EQfysxY_DZ7L2p3mFqjmirM-pd_PHJ4k-wmvzxNimXK5sxDvn4H5L-ZJoeanHtHxqS3Ibc8bJcMZfBfnQ-oQQ?key=mCIPDiawQ7BL13FTYaQrig\" alt=\"playwright testing steps\" loading=\"lazy\" title=\"\"><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently Asked Questions<\/h2>\n\n\n<div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-1781727902449\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Is Playwright better than Selenium or Cypress?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Playwright offers built-in cross-browser support, automatic waiting, and faster parallel execution out of the box, which Selenium and Cypress require more setup to achieve. <\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1781727919828\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">What programming languages does Playwright support?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Playwright natively supports JavaScript and TypeScript, with official bindings for Python, Java, and C#.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1781727933486\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Is Playwright free to use?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Yes. Playwright is a free, open-source framework maintained by Microsoft.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-1781727947555\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">Which browsers does Playwright support?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Playwright supports Chromium, Firefox, and WebKit (Safari&#8217;s engine), covering all major browser engines from a single API.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>Conclusion&nbsp;<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Playwright offers a powerful and versatile framework for test automation, making it a valuable tool for developers and testers alike. Its ability to handle multiple browsers, provide cross-platform support, and offer rich APIs for interaction and validation makes it stand out in the test automation landscape. By following the step-by-step guide, users can leverage Playwright&#8217;s capabilities to create reliable, efficient, and scalable automated tests, ultimately enhancing the quality and performance of their applications. Embracing Playwright can streamline testing processes, reduce manual effort, and ensure a more robust and seamless user experience.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Playwright is an automation library developed by Microsoft in 2020. It enables developers and testers to automate web applications across multiple browsers with ease. The framework has earned 83.6k stars and 5.2k forks on GitHub, with detailed documentation available there to help you get started quickly. In this blog, we will take a deep dive [&hellip;]<\/p>\n","protected":false},"author":32,"featured_media":14111,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[209],"tags":[],"class_list":["post-11868","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-test-automation"],"acf":[],"images":{"medium":"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/playright-for-automation-testing-300x169.jpg","large":"https:\/\/testgrid.io\/blog\/wp-content\/uploads\/2024\/06\/playright-for-automation-testing-1024x576.jpg"},"_links":{"self":[{"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/posts\/11868","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/comments?post=11868"}],"version-history":[{"count":24,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/posts\/11868\/revisions"}],"predecessor-version":[{"id":18646,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/posts\/11868\/revisions\/18646"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/media\/14111"}],"wp:attachment":[{"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/media?parent=11868"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/categories?post=11868"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/testgrid.io\/blog\/wp-json\/wp\/v2\/tags?post=11868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}