{"id":35443,"date":"2022-03-15T12:31:23","date_gmt":"2022-03-15T19:31:23","guid":{"rendered":"https:\/\/app14743.cloudwayssites.com\/?p=35443"},"modified":"2022-09-26T14:28:13","modified_gmt":"2022-09-26T21:28:13","slug":"lightning-fast-playwright-tests-cross-browser","status":"publish","type":"post","link":"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/","title":{"rendered":"Running Lightning-Fast Cross-Browser Playwright Tests Against any Browser"},"content":{"rendered":"\n

Learn how you can run cross browser tests against any stock browser using Playwright \u2013 not just the browser projects like Chromium, Firefox, and WebKit, and not just Chrome and Edge.<\/em><\/p>\n\n\n\n

These days, there are a plethora of great web test automation tools. Although Selenium WebDriver seems to retain its top spot in popularity, alternatives like Playwright are quickly growing their market share<\/a>. Playwright is an open source test framework developed by Microsoft by the same folks who worked on Puppeteer. It is notable for its concise syntax, execution speed, and advanced features. Things like automatic waiting and carefully-designed assertions protect tests against flakiness. And like Selenium, Playwright has bindings for multiple languages: TypeScript, JavaScript, Python, .NET, and Java.<\/p>\n\n\n\n

However, Playwright has one oddity that sets it apart from other frameworks: Instead of testing browser applications<\/em>, Playwright tests browser projects<\/em>. What does this mean? Major modern browser applications like Chrome, Edge, and Safari are based on browser projects that they use internally as their bases. For example, Google Chrome is based on the Chromium project<\/a>. Typically, these internal projects are open source and provide a rendering engine<\/a> for web pages.<\/p>\n\n\n\n

The table below shows the browser projects used by major browser apps:<\/p>\n\n\n\n

Browser project<\/strong><\/th>Browser app<\/strong><\/th><\/tr><\/thead>
Chromium<\/td>Google Chrome, Microsoft Edge, Opera<\/td><\/tr>
Firefox (Gecko)<\/td>Mozilla Firefox<\/td><\/tr>
WebKit<\/td>Apple Safari<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Browser projects offer Playwright unique advantages. Setup is super easy, and tests are faster using browser contexts<\/a>. However, some folks need<\/em> to test full browser applications, not just browser projects. Some teams are required to test specific configurations for compliance or regulations. Other teams may feel like testing projects instead of \u201cstock\u201d browsers is too risky. Playwright can run tests directly against Google Chrome and Microsoft Edge<\/a> with a little extra configuration, but it can\u2019t hit Firefox, Safari, or IE, and in my anecdotal experience, tests against Chrome and Edge run many times slower than the same tests against Chromium. Playwright\u2019s focus on browser projects over browser apps is a double-edged sword: While it arguably helps most testers, it inherently precludes others.<\/p>\n\n\n\n

Thankfully, there is<\/em> a way to run Playwright tests against full browser apps, not just browser projects: using Applitools Visual AI<\/a> with the Ultrafast Test Cloud<\/a>. With the help of Applitools, you can achieve true cross-browser testing with Playwright at lightning speed, even for large test suites. Let\u2019s see how it\u2019s done. We\u2019ll start with a basic Playwright test JavaScript, and then we\u2019ll add visual snapshots that can be rendered using any browser in the Applitools cloud.<\/p>\n\n\n\n

Defining a Test Case<\/h2>\n\n\n\n

Let\u2019s define a basic web app login test for the Applitools demo site<\/a>. The site mimics a basic banking app. The first page is a login screen:<\/p>\n\n\n\n

\"A<\/figure>\n\n\n\n

You can enter any username or password to login. Then, the main page appears:<\/p>\n\n\n\n

\"A<\/figure>\n\n\n\n

Nothing fancy here. The steps for our test case are straightforward:<\/p>\n\n\n\n

Scenario: Successful login\n  Given the login page is displayed\n  When the user enters their username and password\n  And the user clicks the login button\n  Then the main page is displayed\n<\/code><\/pre>\n\n\n\n
These steps would be the same for the login behavior of any other application.<\/p>\n\n\n\n
Automating a Playwright Test<\/h2>\n\n\n\n
Let\u2019s automate our login test in JavaScript using Playwright. We could<\/em> automate our test in TypeScript (which is arguably better), but I\u2019ll use JavaScript for this example to keep the code plain and simple.<\/p>\n\n\n\n
Create a new project, and install Playwright<\/a>. Under the tests folder, create a new file named login.spec.js<\/code>, and add the following test stub:<\/p>\n\n\n\n
const { test, expect } = require('@playwright\/test');\n\ntest.describe.configure({ mode: 'parallel' })\n\ntest.describe('Login', () => {\n\n   test.beforeEach(async ({ page }) => {\n       await page.setViewportSize({width: 1600, height: 1200});\n   });\n\n   test('should log into the demo app', async ({ page }) => {\n      \n       \/\/ Load login page\n       \/\/ ...\n\n       \/\/ Verify login page\n       \/\/ ...\n      \n       \/\/ Perform login\n       \/\/ ...\n\n       \/\/ Verify main page\n       \/\/ ...\n   });\n})\n<\/code><\/pre>\n\n\n\n
Playwright uses a Mocha<\/a>-like structure for test cases. The test.beforeEach(...)<\/code> call sets an explicit viewport size for testing to make sure the responsive layout renders as expected. The test(...)<\/code> call includes sections for each step.<\/p>\n\n\n\n
Let\u2019s implement the steps using Playwright calls. Here\u2019s the first step to load the login page:<\/p>\n\n\n\n
       \/\/ Load login page\n       await page.goto('https:\/\/demo.applitools.com');\n<\/code><\/pre>\n\n\n\n
The second step verifies that elements like username and password fields appear on the login page. Playwright\u2019s assertions automatically wait for the elements to appear:<\/p>\n\n\n\n
\/\/ Verify login page\n       await expect(page.locator('div.logo-w')).toBeVisible();\n       await expect(page.locator('id=username')).toBeVisible();\n       await expect(page.locator('id=password')).toBeVisible();\n       await expect(page.locator('id=log-in')).toBeVisible();\n       await expect(page.locator('input.form-check-input')).toBeVisible();\n<\/code><\/pre>\n\n\n\n
The third step actually logs into the site like a human user:<\/p>\n\n\n\n
       \/\/ Perform login\n       await page.fill('id=username', 'andy')\n       await page.fill('id=password', 'i<3pandas')\n       await page.click('id=log-in')\n<\/code><\/pre>\n\n\n\n
The fourth and final step makes sure the main page loads correctly. Again, assertions automatically wait for elements to appear:<\/p>\n\n\n\n
       \/\/ Verify main page\n      \n       \/\/   Check various page elements\n       await expect.soft(page.locator('div.logo-w')).toBeVisible();\n       await expect.soft(page.locator('ul.main-menu')).toBeVisible();\n       await expect.soft(page.locator('div.avatar-w img')).toHaveCount(2);\n       await expect.soft(page.locator('text=Add Account')).toBeVisible();\n       await expect.soft(page.locator('text=Make Payment')).toBeVisible();\n       await expect.soft(page.locator('text=View Statement')).toBeVisible();\n       await expect.soft(page.locator('text=Request Increase')).toBeVisible();\n       await expect.soft(page.locator('text=Pay Now')).toBeVisible();\n       await expect.soft(page.locator(\n           'div.element-search.autosuggest-search-activator > input'\n       )).toBeVisible();\n\n       \/\/    Check time message\n       await expect.soft(page.locator('id=time')).toContainText(\n           \/Your nearest branch closes in:( \\d+[hms])+\/);\n\n       \/\/    Check menu element names\n       await expect.soft(page.locator('ul.main-menu li span')).toHaveText([\n           'Card types',\n           'Credit cards',\n           'Debit cards',\n           'Lending',\n           'Loans',\n           'Mortgages'\n       ]);\n\n       \/\/    Check transaction statuses\n       let statuses =\n           await page.locator('span.status-pill + span').allTextContents();\n       statuses.forEach(item => {\n           expect.soft(['Complete', 'Pending', 'Declined']).toContain(item);\n       });<\/code><\/pre>\n\n\n\n
The first three steps are nice and concise, but the code for the fourth step is quite long. Despite making several assertions for various page elements, there are still things left unchecked!<\/p>\n\n\n\n
Run the test locally to make sure it works:<\/p>\n\n\n\n
$ npx playwright test<\/code><\/p>\n\n\n\n
This command will run the test against all three Playwright browsers \u2013 Chromium, Firefox, and WebKit \u2013 in headless mode and in parallel. You can append the \u201c--headed<\/code>\u201d option to see the browsers open and render the pages. The tests should take only a few short seconds to complete, and they should all pass.<\/p>\n\n\n\n
Introducing Visual Snapshots<\/h2>\n\n\n\n
You could run this login test on your local machine or from your Continuous Integration (CI) service, but in its present form, it can\u2019t run against certain \u201cstock\u201d browsers like Apple Safari or Internet Explorer. If you attempt to use a browser channel<\/a> to test stock Chrome or Edge browsers, tests would probably run much slower compared to Chromium. To run against any browser at lightning speed, we need the help of visual testing techniques using Applitools Visual AI and the Ultrafast Test Cloud.<\/p>\n\n\n\n
Visual testing<\/a> is the practice of inspecting visual differences between snapshots of screens in the app you are testing. You start by capturing a \u201cbaseline\u201d snapshot of, say, the login page to consider as \u201cright\u201d or \u201cexpected.\u201d Then, every time you run the tests, you capture a new snapshot of the same page and compare it to the baseline. By comparing the two snapshots side-by-side, you can detect any visual differences. Did a button go missing? Did the layout shift to the left? Did the colors change? If nothing changes, then the test passes. However, if there are changes, a human tester should review the differences to decide if the change is good or bad.<\/p>\n\n\n\n
Manual testers have done visual testing since the dawn of computer screens. Applitools Visual AI<\/a> simply automates the process. It highlights differences in side-by-side snapshots so you don\u2019t miss them. Furthermore, Visual AI focuses on meaningful changes that human eyes would notice. If an element shifts one pixel to the right, that\u2019s not a problem<\/a>. Visual AI won\u2019t bother you with that noise.<\/p>\n\n\n\n
If a picture is worth a thousand words, then a visual snapshot is worth a thousand assertions.<\/strong> We could update our login test to take visual snapshots using Applitools Eyes SDK<\/a> in place of lengthy assertions. Visual snapshots provide stronger coverage than the previous assertions. Remember how our login test made several checks but still didn\u2019t cover all the elements on the page? A visual snapshot would implicitly capture everything with only one line of code. Visual testing like this enables more effective functional testing than traditional assertions.<\/p>\n\n\n\n
But back to the original problem: how does this enable us to run Playwright tests against any stock browser? That\u2019s the magic of snapshots. Notice how I said \u201csnapshot\u201d and not \u201cscreenshot.\u201d A screenshot<\/em> is merely a grid of static pixels. A snapshot<\/em>, however, captures full page content \u2013 HTML, CSS, and JavaScript \u2013 that can be re-rendered in any browser configuration. If we update our Playwright test to take visual snapshots of the login page and the main page, then we could run our test one time locally to capture the snapshots, Then, the Applitools Eyes SDK would upload the snapshots to the Applitools Ultrafast Test Cloud<\/a> to render them in any target browser \u2013 including browsers not natively supported by Playwright \u2013 and compare them against baselines. All the heavy work for visual checkpoints would be done by the Applitools Ultrafast Test Cloud, not by the local machine. It also works fast, since re-rendering snapshots takes much less time than re-running full tests.<\/p>\n\n\n\n
Updating the Playwright Test<\/h2>\n\n\n\n
Let\u2019s turn our login test into a visual test. First, make sure you have an Applitools account. You can register for a free account<\/a> to get started.<\/p>\n\n\n\n
Next, install the Applitools Eyes SDK for Playwright into your project:<\/p>\n\n\n\n
$ npm install -D @applitools\/eyes-playwright<\/code><\/p>\n\n\n\n
Add the following import statement to login.spec.js<\/code>:<\/p>\n\n\n\n
const {\n   VisualGridRunner,\n   Eyes,\n   Configuration,\n   BatchInfo,\n   BrowserType,\n   DeviceName,\n   ScreenOrientation,\n   Target,\n   MatchLevel\n} = require('@applitools\/eyes-playwright');\n<\/code><\/pre>\n\n\n\n
Next, we need to specify which browser configurations to run in Applitools Ultrafast Grid. Update the test.beforeEach(...)<\/code> call to look like this:<\/p>\n\n\n\n
test.describe('Login', () => {\n   let eyes, runner;\n\n   test.beforeEach(async ({ page }) => {\n       await page.setViewportSize({width: 1600, height: 1200});\n\n       runner = new VisualGridRunner({ testConcurrency: 5 });\n       eyes = new Eyes(runner);\n  \n       const configuration = new Configuration();\n       configuration.setBatch(new BatchInfo('Modern Cross Browser Testing Workshop'));\n  \n       configuration.addBrowser(800, 600, BrowserType.CHROME);\n       configuration.addBrowser(700, 500, BrowserType.FIREFOX);\n       configuration.addBrowser(1600, 1200, BrowserType.IE_11);\n       configuration.addBrowser(1024, 768, BrowserType.EDGE_CHROMIUM);\n       configuration.addBrowser(800, 600, BrowserType.SAFARI);\n  \n       configuration.addDeviceEmulation(DeviceName.iPhone_X, ScreenOrientation.PORTRAIT);\n       configuration.addDeviceEmulation(DeviceName.Pixel_2, ScreenOrientation.PORTRAIT);\n       configuration.addDeviceEmulation(DeviceName.Galaxy_S5, ScreenOrientation.PORTRAIT);\n       configuration.addDeviceEmulation(DeviceName.Nexus_10, ScreenOrientation.PORTRAIT);\n       configuration.addDeviceEmulation(DeviceName.iPad_Pro, ScreenOrientation.LANDSCAPE);\n  \n       eyes.setConfiguration(configuration);\n   });\n})\n<\/code><\/pre>\n\n\n\n
That\u2019s a lot of new code! Let\u2019s break it down:<\/p>\n\n\n\n
  1. The page.setViewportSize(...)<\/code> call remains unchanged. It will set the viewport only<\/em> for the local test run.<\/li>
  2. The runner<\/code> object points visual tests to the Ultrafast Grid.<\/li>
  3. The testConcurrency<\/code> setting controls how many visual tests will run in parallel in the Ultrafast Grid. A higher concurrency means shorter overall execution time. (Warning: if you have a free account, your concurrency limit will be 1.)<\/li>
  4. The eyes<\/code> object watches the browser for taking visual snapshots.<\/li>
  5. The configuration<\/code> object sets the test batch name and the various browser configurations to test in the Ultrafast Grid.<\/li><\/ol>\n\n\n\n
    This configuration will run our visual login test against 10 different browsers: 5 desktop browsers of various viewports, and 5 mobile browsers of various orientations.<\/p>\n\n\n\n
    Time to update the test case. We must \u201copen\u201d Applitools Eyes at the beginning of the test to capture screenshots, and we must \u201cclose\u201d Eyes at the end:<\/p>\n\n\n\n
    test('should log into the demo app', async ({ page }) => {\n      \n       \/\/ Open Applitools Eyes\n       await eyes.open(page, 'Applitools Demo App', 'Login');\n\n       \/\/ Test steps\n       \/\/ ...\n\n       \/\/ Close Applitools Eyes\n       await eyes.close(false)\n   });\n<\/code><\/pre>\n\n\n\n
    The load and login steps do not need any changes because the interactions are the same. However, the “verify” steps reduce drastically to one-line snapshot calls:<\/p>\n\n\n\n
       test('should log into the demo app', async ({ page }) => {\n      \n       \/\/ ...\n\n       \/\/ Verify login page\n       await eyes.check('Login page', Target.window().fully());\n      \n       \/\/ ...\n      \n       \/\/ Verify main page\n       await eyes.check('Main page', Target.window().matchLevel(MatchLevel.Layout).fully());\n\n       \/\/ ...\n      \n   });\n<\/code><\/pre>\n\n\n\n
    These snapshots capture the full window for both pages. The main page also sets a match level to \u201clayout\u201d so that differences in text and color are ignored. Snapshots will be captured once locally and uploaded to the Ultrafast Grid to be rendered on each target browser. Bye bye, long and complicated assertions!<\/p>\n\n\n\n
    Finally, after each test, we should add safety handling and result dumping:<\/p>\n\n\n\n
       test.afterEach(async () => {\n       await eyes.abort();\n\n       const results = await runner.getAllTestResults(false);\n       console.log('Visual test results', results);\n   });\n<\/code><\/pre>\n\n\n\n
    The completed code for login.spec.js<\/code> should look like this:<\/p>\n\n\n\n
    const { test } = require('@playwright\/test');\nconst {\n   VisualGridRunner,\n   Eyes,\n   Configuration,\n   BatchInfo,\n   BrowserType,\n   DeviceName,\n   ScreenOrientation,\n   Target,\n   MatchLevel\n} = require('@applitools\/eyes-playwright');\n\n\ntest.describe.configure({ mode: 'parallel' })\n\ntest.describe('A visual test', () => {\n   let eyes, runner;\n\n   test.beforeEach(async ({ page }) => {\n       await page.setViewportSize({width: 1600, height: 1200});\n\n       runner = new VisualGridRunner({ testConcurrency: 5 });\n       eyes = new Eyes(runner);\n  \n       const configuration = new Configuration();\n       configuration.setBatch(new BatchInfo('Modern Cross Browser Testing Workshop'));\n  \n       configuration.addBrowser(800, 600, BrowserType.CHROME);\n       configuration.addBrowser(700, 500, BrowserType.FIREFOX);\n       configuration.addBrowser(1600, 1200, BrowserType.IE_11);\n       configuration.addBrowser(1024, 768, BrowserType.EDGE_CHROMIUM);\n       configuration.addBrowser(800, 600, BrowserType.SAFARI);\n  \n       configuration.addDeviceEmulation(DeviceName.iPhone_X, ScreenOrientation.PORTRAIT);\n       configuration.addDeviceEmulation(DeviceName.Pixel_2, ScreenOrientation.PORTRAIT);\n       configuration.addDeviceEmulation(DeviceName.Galaxy_S5, ScreenOrientation.PORTRAIT);\n       configuration.addDeviceEmulation(DeviceName.Nexus_10, ScreenOrientation.PORTRAIT);\n       configuration.addDeviceEmulation(DeviceName.iPad_Pro, ScreenOrientation.LANDSCAPE);\n  \n       eyes.setConfiguration(configuration);\n   });\n\n   test('should log into the demo app', async ({ page }) => {\n      \n       \/\/ Open Applitools Eyes\n       await eyes.open(page, 'Applitools Demo App', 'Login');\n\n       \/\/ Load login page\n       await page.goto('https:\/\/demo.applitools.com');\n\n       \/\/ Verify login page\n       await eyes.check('Login page', Target.window().fully());\n      \n       \/\/ Perform login\n       await page.fill('id=username', 'andy')\n       await page.fill('id=password', 'i<3pandas')\n       await page.click('id=log-in')\n\n       \/\/ Verify main page\n       await eyes.check('Main page', Target.window().matchLevel(MatchLevel.Layout).fully());\n\n       \/\/ Close Applitools Eyes\n       await eyes.close(false)\n   });\n\n   test.afterEach(async () => {\n       await eyes.abort();\n\n       const results = await runner.getAllTestResults(false);\n       console.log('Visual test results', results);\n   });\n})\n\n<\/code><\/pre>\n\n\n\n
    Now, it\u2019s a visual test! Let\u2019s run it.<\/p>\n\n\n\n
    Running the Test<\/h2>\n\n\n\n
    Your account comes with an API key. Visual tests using Applitools Eyes need this API key for uploading results to your account. On your machine, set this key as an environment variable.<\/p>\n\n\n\n
    On Linux and macOS:<\/p>\n\n\n\n
    $ export APPLITOOLS_API_KEY=<value><\/code><\/p>\n\n\n\n
    On Windows:<\/p>\n\n\n\n
    > set APPLITOOLS_API_KEY=<value><\/code><\/p>\n\n\n\n
    Then, launch the test using only one browser locally:<\/p>\n\n\n\n
    $ npx playwright test \u2014-browser=chromium<\/code><\/p>\n\n\n\n
    (Warning:<\/em> If your playwright.config.js<\/code> file has projects configured, you will need to use the \u201c--project<\/code>\u201d option instead of the \u201c--browser<\/code>\u201d option. Playwright may automatically configure this if you run npm init playwright<\/code> to set up the project.)<\/p>\n\n\n\n
    When this test runs, it will upload snapshots for both the login page and the main page to the Applitools test cloud. It needs to run only one time locally to capture the snapshots. That\u2019s why we set the command to run using only Chromium.<\/p>\n\n\n\n
    Open the Applitools dashboard to view the visual results:<\/p>\n\n\n\n
    \"The<\/figure>\n\n\n\n
    Notice how this one login test has one result for each target configuration. All results have “New” status because they are establishing baselines. Also, notice how little time it took to run this batch of tests:<\/p>\n\n\n
    \n
    \"The<\/figure><\/div>\n\n\n
    Running our test across 10 different browser configurations with 2 visual checkpoints each at a concurrency level of 5 took only 36 seconds to complete. That\u2019s ultra fast! Running that many test iterations with a Selenium Grid or similar scale-out platform could take several minutes.<\/p>\n\n\n\n
    Run the test again. The second run should succeed just like the first. However, the new dashboard results now say “Passed” because Applitools compared the latest snapshots to the baselines and verified that they had not changed:<\/p>\n\n\n\n
    \"The<\/figure>\n\n\n\n
    This time, all variations took 32 seconds to complete \u2013 about half a minute.<\/p>\n\n\n\n
    Passing tests are great, but what happens if a page changes? Consider an alternate version of the login page:<\/p>\n\n\n\n
    \"A<\/figure>\n\n\n\n
    This version has a broken icon and a different login button. Modify the Playwright call to load the login page to test this version of the site like this:<\/p>\n\n\n\n
           await page.goto('https:\/\/demo.applitools.com\/index_v2.html');<\/code><\/pre>\n\n\n\n
    Now, when you rerun the test, results appear as \u201cUnresolved\u201d in the Applitools dashboard:<\/p>\n\n\n\n
    \"The<\/figure>\n\n\n\n
    When you open each result, the dashboard will display visual comparisons for each snapshot. If you click the snapshot, it opens the comparison window:<\/p>\n\n\n\n
    \"A<\/figure>\n\n\n\n
    The baseline snapshot appears on the left, while the latest checkpoint snapshot appears on the right. Differences will be highlighted in magenta. As the tester, you can choose to either accept the change as a new baseline or reject it as a failure.<\/p>\n\n\n\n
    Taking the Next Steps<\/h2>\n\n\n\n
    Playwright truly is a nifty framework. Thanks to the Applitools Ultrafast Grid, you can upgrade any Playwright test with visual snapshots and run them against any browsers, even ones not natively supported by Playwright. Applitools enables Playwright tests to become cross-browser tests. Just note that this style of testing focuses on cross-browser page rendering, not cross-browser page interactions. You may still want to run your Playwright tests locally against Firefox and WebKit in addition to Chromium, while using the Applitools Ultrafast Grid to validate rendering on different browser and viewport configurations.<\/p>\n\n\n\n
    Want to see the full code? Check out this GitHub repository: applitools\/workshop-cbt-playwright-js<\/a>.<\/p>\n\n\n\n
    Want to try visual testing for yourself? Register for a free Applitools account<\/a>.<\/p>\n\n\n\n
    Want to see how to do this type of cross-browser testing with Cypress? Check out this article<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Learn how you can run cross browser tests against any stock browser using Playwright \u2013 not just the browser projects like Chromium, Firefox, and WebKit, and not just Chrome and Edge.<\/p>\n","protected":false},"author":89,"featured_media":35482,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[10004],"tags":[10050,16608,12690,16642,12686],"acf":[],"yoast_head":"\nRunning Lightning-Fast Cross-Browser Playwright Tests Against any Browser - AI-Powered End-to-End Testing | Applitools<\/title>\n<meta name=\"description\" content=\"Learn how you can run cross browser tests against any stock browser using Playwright \u2013 not just the browser projects like Chromium, Firefox, and WebKit, and not just Chrome and Edge.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Running Lightning-Fast Cross-Browser Playwright Tests Against any Browser\" \/>\n<meta property=\"og:description\" content=\"Learn how you can run cross browser tests against any stock browser using Playwright \u2013 not just the browser projects like Chromium, Firefox, and WebKit, and not just Chrome and Edge.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/\" \/>\n<meta property=\"og:site_name\" content=\"AI-Powered End-to-End Testing | Applitools\" \/>\n<meta property=\"article:published_time\" content=\"2022-03-15T19:31:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-26T21:28:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/playwright-cross-browser_831x542.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"831\" \/>\n\t<meta property=\"og:image:height\" content=\"542\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Andrew Knight\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Andrew Knight\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/\"},\"author\":{\"name\":\"Andrew Knight\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/a8038d2c9ccd3531090422b6172b125b\"},\"headline\":\"Running Lightning-Fast Cross-Browser Playwright Tests Against any Browser\",\"datePublished\":\"2022-03-15T19:31:23+00:00\",\"dateModified\":\"2022-09-26T21:28:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/\"},\"wordCount\":2143,\"publisher\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/playwright-cross-browser_831x542.jpg\",\"keywords\":[\"Cross-browser Testing\",\"Playwright\",\"Test Engineers\",\"visual testing\",\"Visual Testing Strategies\"],\"articleSection\":[\"Advanced Topics\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/\",\"name\":\"Running Lightning-Fast Cross-Browser Playwright Tests Against any Browser - AI-Powered End-to-End Testing | Applitools\",\"isPartOf\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/playwright-cross-browser_831x542.jpg\",\"datePublished\":\"2022-03-15T19:31:23+00:00\",\"dateModified\":\"2022-09-26T21:28:13+00:00\",\"description\":\"Learn how you can run cross browser tests against any stock browser using Playwright \u2013 not just the browser projects like Chromium, Firefox, and WebKit, and not just Chrome and Edge.\",\"breadcrumb\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/#primaryimage\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/playwright-cross-browser_831x542.jpg\",\"contentUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/playwright-cross-browser_831x542.jpg\",\"width\":831,\"height\":542},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/app14743.cloudwayssites.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Advanced Topics\",\"item\":\"https:\/\/app14743.cloudwayssites.com\/blog\/category\/advanced-topics\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Running Lightning-Fast Cross-Browser Playwright Tests Against any Browser\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#website\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/\",\"name\":\"Applitools Visual AI\",\"description\":\"Applitools delivers full end-to-end test automation with AI infused at every step.\",\"publisher\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/app14743.cloudwayssites.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#organization\",\"name\":\"Applitools\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png\",\"contentUrl\":\"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png\",\"width\":156,\"height\":28,\"caption\":\"Applitools\"},\"image\":{\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/a8038d2c9ccd3531090422b6172b125b\",\"name\":\"Andrew Knight\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a1117da4074b1fd8692051ab8a3a9528?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/a1117da4074b1fd8692051ab8a3a9528?s=96&d=mm&r=g\",\"caption\":\"Andrew Knight\"},\"url\":\"https:\/\/app14743.cloudwayssites.com\/blog\/author\/andyknight\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Running Lightning-Fast Cross-Browser Playwright Tests Against any Browser - AI-Powered End-to-End Testing | Applitools","description":"Learn how you can run cross browser tests against any stock browser using Playwright \u2013 not just the browser projects like Chromium, Firefox, and WebKit, and not just Chrome and Edge.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/","og_locale":"en_US","og_type":"article","og_title":"Running Lightning-Fast Cross-Browser Playwright Tests Against any Browser","og_description":"Learn how you can run cross browser tests against any stock browser using Playwright \u2013 not just the browser projects like Chromium, Firefox, and WebKit, and not just Chrome and Edge.","og_url":"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/","og_site_name":"AI-Powered End-to-End Testing | Applitools","article_published_time":"2022-03-15T19:31:23+00:00","article_modified_time":"2022-09-26T21:28:13+00:00","og_image":[{"width":831,"height":542,"url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/playwright-cross-browser_831x542.jpg","type":"image\/jpeg"}],"author":"Andrew Knight","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Andrew Knight","Est. reading time":"14 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/#article","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/"},"author":{"name":"Andrew Knight","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/a8038d2c9ccd3531090422b6172b125b"},"headline":"Running Lightning-Fast Cross-Browser Playwright Tests Against any Browser","datePublished":"2022-03-15T19:31:23+00:00","dateModified":"2022-09-26T21:28:13+00:00","mainEntityOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/"},"wordCount":2143,"publisher":{"@id":"https:\/\/app14743.cloudwayssites.com\/#organization"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/playwright-cross-browser_831x542.jpg","keywords":["Cross-browser Testing","Playwright","Test Engineers","visual testing","Visual Testing Strategies"],"articleSection":["Advanced Topics"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/","url":"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/","name":"Running Lightning-Fast Cross-Browser Playwright Tests Against any Browser - AI-Powered End-to-End Testing | Applitools","isPartOf":{"@id":"https:\/\/app14743.cloudwayssites.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/#primaryimage"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/#primaryimage"},"thumbnailUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/playwright-cross-browser_831x542.jpg","datePublished":"2022-03-15T19:31:23+00:00","dateModified":"2022-09-26T21:28:13+00:00","description":"Learn how you can run cross browser tests against any stock browser using Playwright \u2013 not just the browser projects like Chromium, Firefox, and WebKit, and not just Chrome and Edge.","breadcrumb":{"@id":"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/#primaryimage","url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/playwright-cross-browser_831x542.jpg","contentUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2022\/03\/playwright-cross-browser_831x542.jpg","width":831,"height":542},{"@type":"BreadcrumbList","@id":"https:\/\/app14743.cloudwayssites.com\/blog\/lightning-fast-playwright-tests-cross-browser\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/app14743.cloudwayssites.com\/"},{"@type":"ListItem","position":2,"name":"Advanced Topics","item":"https:\/\/app14743.cloudwayssites.com\/blog\/category\/advanced-topics\/"},{"@type":"ListItem","position":3,"name":"Running Lightning-Fast Cross-Browser Playwright Tests Against any Browser"}]},{"@type":"WebSite","@id":"https:\/\/app14743.cloudwayssites.com\/#website","url":"https:\/\/app14743.cloudwayssites.com\/","name":"Applitools Visual AI","description":"Applitools delivers full end-to-end test automation with AI infused at every step.","publisher":{"@id":"https:\/\/app14743.cloudwayssites.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/app14743.cloudwayssites.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/app14743.cloudwayssites.com\/#organization","name":"Applitools","url":"https:\/\/app14743.cloudwayssites.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/","url":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png","contentUrl":"https:\/\/app14743.cloudwayssites.com\/wp-content\/uploads\/2020\/03\/applitools.png","width":156,"height":28,"caption":"Applitools"},"image":{"@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/a8038d2c9ccd3531090422b6172b125b","name":"Andrew Knight","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/app14743.cloudwayssites.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/a1117da4074b1fd8692051ab8a3a9528?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/a1117da4074b1fd8692051ab8a3a9528?s=96&d=mm&r=g","caption":"Andrew Knight"},"url":"https:\/\/app14743.cloudwayssites.com\/blog\/author\/andyknight\/"}]}},"_links":{"self":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/35443"}],"collection":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/users\/89"}],"replies":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/comments?post=35443"}],"version-history":[{"count":0,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/posts\/35443\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media\/35482"}],"wp:attachment":[{"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/media?parent=35443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/categories?post=35443"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/app14743.cloudwayssites.com\/wp-json\/wp\/v2\/tags?post=35443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}