Skip to content

Files

Latest commit

 

History

History
311 lines (248 loc) · 14.3 KB

playwright-test-execution-setup.md

File metadata and controls

311 lines (248 loc) · 14.3 KB
id title hide_title sidebar_label description keywords url site_name slug
playwright-test-execution-setup
Playwright Test Execution Setup
true
Test Execution Setup
Learn how to configure the desired capability for selecting browsers and OS, organzing tests, changing desktop resolution, and more for your Playwright tests.
playwright testing
playwright e2e testing
playwright mobile testing
playwright testing tool
playwright testing on lambdatest
playwright testing lambdatest
LambdaTest
playwright-test-execution-setup/
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify({ "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [{ "@type": "ListItem", "position": 1, "name": "LambdaTest", "item": "https://www.lambdatest.com" },{ "@type": "ListItem", "position": 2, "name": "Support", "item": "https://www.lambdatest.com/support/docs/" },{ "@type": "ListItem", "position": 3, "name": "Test Execution Setup", "item": "https://www.lambdatest.com/support/docs/playwright-test-execution-setup/" }] }) }} ></script>

Playwright - Test Execution Setup

Whenever you run a Playwright test, you must specify the operating system and the browser you wish to use. The LambdaTest Desired Capabilities Generator allows you to automatically create the capabilities class needed to run your Playwright automation scripts on LambdaTest.

In this document, learn how to configure the desired capability for selecting browsers and OS, organzing tests, changing desktop resolution, and more for your Playwright tests.

Choosing Browser And OS

To perform Playwright testing on LambdaTest, you need to define the browserName, browserVersion, and platform capabilities in your automation scripts.

Key Expected Values Description Capability
browserName Chrome, Microsoft Edge

Playwright Bundled Browsers: pw-chromium, pw-webkit, and pw-firefox		 Specify the browser to test on const capability = {"browserName": "pw-webkit"}
browserVersion Chrome 83 & above, Edge 83 & above Specify the browser version to test on const capability = {"browserVersion": "latest"}
platform Windows: 11, 10, 8, 8.1, 7

macOS: Monterey, Big Sur, Catiline, Mojave		 Specify the platform name const capability = { "LT:Options": {"platform": "Windows 10",}}

Playwright Supported Browsers

Following is a list of compatible Playwright bundled browsers that you can use to run tests on the LambdaTest platform.

Playwright Versions Compatible Browsers
v1.44 Chromium 125.0
Firefox 125.0.1
WebKit 17.4
v1.43 Chromium 124.0
Firefox 124.0
WebKit 17.4
v1.42 Chromium 123.0
Firefox 123.0
WebKit 17.4
v1.41 Chromium 121.0
Firefox 121.0
WebKit 17.4
v1.40 Chromium 120.0
Firefox 119.0
WebKit 17.4
v1.39 Chromium 119.0
Firefox 118.0
WebKit 17.4
v1.38 Chromium 117.0
Firefox 117.0
WebKit 17.0
v1.37 Chromium 116.0
Firefox 115.0
WebKit 17.0
v1.36 Chromium 115.0
Firefox 115.0
WebKit 17.0
v1.35 Chromium 115.0
Firefox 113.0
WebKit 16.4
v1.34 Chromium 115.0
Firefox 113.0
WebKit 16.4
v1.33 Chromium 113.0
Firefox 112.0
WebKit 16.4
v1.32 Chromium 112.0
Firefox 111.0
WebKit 16.4
v1.31 Chromium 111.0
Firefox 109.0
WebKit 16.4
v1.30 Chromium 110.0
Firefox 108.0
WebKit 16.4
v1.29 Chromium 109.0
Firefox 107.0
WebKit 16.0
v1.28 Chromium 108.0
Firefox 106.0
WebKit 16.4
v1.27 Chromium 107.0
Firefox 105.0
WebKit 16.0
v1.26 Chromium 106.0
Firefox 104.0
WebKit 16.0
v1.25 Chromium 105.0
Firefox 103.0
WebKit 16.0
v1.24 Chromium 103.0
Firefox 102.0
WebKit 16.0
v1.23 Chromium 103.0
Firefox 100.0
WebKit 15.4
v1.22 Chromium 102.0
Firefox 99.0
WebKit 15.4
v1.21 Chromium 101.0
Firefox 98.0
WebKit 15.4
v1.20 Chromium 101.0
Firefox 97.0
WebKit 15.4
v1.19 Chromium 100.0
Firefox 96.0
WebKit 15.4
v1.18 Chromium 99.0
Firefox 95.0
WebKit 15.4
v1.17 Chromium 98.0
Firefox 94.0
WebKit 15.4
v1.16 Chromium 97.0
Firefox 93.0
WebKit 15.4
v1.15 Chromium 96.0
Firefox 92.0
WebKit 15.0

Organizing Tests

You can name your test cases and categorize your Playwright builds by build number, build name, test and build tags for easier analysis. Use the following capabilities to organize your Playwright tests.

Key Values Description Capability
build Playwright Sample Build Represent the build number for your test const capability = {"LT:Options": {"build": "<build_name>",}}
name Playwright Sample Test Represents the name of a test const capability = {"LT:Options": {"name": "<test_name>",}}
projectName Playwright Sample Project Represents the name of a project const capability = {"LT:Options": {"projectName": "<project_name>",}}
tags ["tag1", "tag2", "tag3"] Group your Playwright tests const capability = {"LT:Options": { "tags": ["tag1", "tag2", "tag3"], }}
buildTags ["build1", "build2", "build3"] Group your Playwright builds const capability = {"LT:Options": { "buildTags": ["build1", "build2", "build3"] }}

Changing Desktop Resolutions

Playwright tests run with a 1920x1080 resolution by default for desktop browsers. With our resolution capability, you can set a different screen resolution for your tests.

Capability Description Expected Values Example
resolution Specifying your desktop resolution before initiating the test String, Default value: 1920x1080

Windows 11 & 10: 1024x768, 1280x800, 1280x1024, 1366x768, 1440x900, 1680x1050, 1600x1200, 1920x1200, 1920x1080 and 2048x1536

macOS: 1024x768, 1280x960, 1280x1024, 1600x1200 and 1920x1080		 const capabilities = { 'LT:Options': {'resolution': '2048x1536',}}

Changing Browser Window Size

The default viewport size for Playwright tests is 1280x720. If you wish to maximize the browser window during your Playwright test, you can do it as shown in the code below.

// Create context with given viewport
const context = await browser.newContext({
  viewport: { width: 1280, height: 1024 }
});

The above Playwright test runs on a default viewport of 1280x1024. However, you can also select any other viewport when creating a new context.

If you resize viewport for individual page then run the below command.

await page.setViewportSize({ width: 1600, height: 1200 });

Setting Browser Options

Playwright lets you set browser arguments for Chromium based browsers. When selecting Chrome and Edge, you can set browser options using 'goog:chromeOptions' and 'ms:edgeOptions' capability as shown below.

For Chrome

const { chromium } = require('playwright');

const capabilities = {
    'browserName': 'Chrome', // Browsers allowed: `Chrome`, `MicrosoftEdge`, `pw-chromium`, `pw-firefox` and `pw-webkit`
    'browserVersion': 'latest',
    'LT:Options': {
      'platform': 'Windows 10',
      'build': 'Playwright Sample Build',
      'name': 'Playwright Sample Test',
      'user': process.env.LT_USERNAME,
      'accessKey': process.env.LT_ACCESS_KEY,
      'goog:chromeOptions':[
         '--user-agent=<Any custom user agent>',
       ],

    }
  }

  const browser = await chromium.connect({
    wsEndpoint: `wss://cdp.lambdatest.com/playwright?capabilities=${encodeURIComponent(JSON.stringify(capabilities))}`
  })

For Edge

const { chromium } = require('playwright');

const capabilities = {
  'browserName': 'Chrome', // Browsers allowed: `Chrome`, `MicrosoftEdge`, `pw-chromium`, `pw-firefox` and `pw-webkit`
  'browserVersion': 'latest',
  'LT:Options': {
    'platform': 'Windows 10',
    'build': 'Playwright Sample Build',
    'name': 'Playwright Sample Test',
    'user': process.env.LT_USERNAME,
    'accessKey': process.env.LT_ACCESS_KEY,
    'ms:edgeOptions':[
       '--user-agent=<Any custom user agent>',
     ],

  }
}

const browser = await chromium.connect({
  wsEndpoint: `wss://cdp.lambdatest.com/playwright?capabilities=${encodeURIComponent(JSON.stringify(capabilities))}`
})

Note: You can define any Chromium based argument from the list of Chromium command line arguments.

Getting Session Details

When you run a Playwright test on LambdaTest, it generates different logs for each test session. To get relevant information for the specific session, use the snippet provided below in your Playwright test scripts.

let response = JSON.parse(await page.evaluate(_ => {}, `lambdatest_action: ${JSON.stringify({ action: 'getTestDetails' })}`))
console.log(response);

Upon executing the script, you will get the details for the particular test session as a JSON response as shown below.

{
  data: {
    test_id: 'RWA9R-AC4V8-GJRET-YHBO2',
    build_id: 9415381,
    name: 'Playwright Sample Test',
    user_id: 1001150,
    username: 'kaustubhd',
    test_type: 'playwright',
    platform: 'win10',
    browser: 'Chrome',
    browser_version: '107.0',
    status_ind: 'running',
    session_id: 'RWA9R-AC4V8-GJRET-YHBO2',
    build_name: 'Playwright Sample Build',
    create_timestamp: '2022-12-07 10:53:16',
    start_timestamp: '2022-12-07 10:53:16',
    remark: 'running',
    console_logs_url: 'https://api.lambdatest.com/automation/api/v1/sessions/RWA9R-AC4V8-GJRET-YHBO2/log/console',
    network_logs_url: 'https://api.lambdatest.com/automation/api/v1/sessions/RWA9R-AC4V8-GJRET-YHBO2/log/network',
    command_logs_url: 'https://api.lambdatest.com/automation/api/v1/sessions/RWA9R-AC4V8-GJRET-YHBO2/log/command',
    video_url: 'https://automation.lambdatest.com/public/video?testID=RWA9R-AC4V8-GJRET-YHBO2&auth=50471585dd55293d204fe87f63400f5f',
    screenshot_url: 'https://video-bundler.lambdatest.com/RWA9R-AC4V8-GJRET-YHBO2/screenshots.zip?orgId=588659&createTimestamp=1670410396&testCreateTimestamp=2022-12-07%2010:53:16'
  },
  message: 'Retrieve session was successful',
  status: 'success'
}

Configuring Geolocation

You can run your Playwright tests across 53+ geographies using the 'geoLocation' capability as shown below.

Key Values Description Capability
geoLocation US Represents the geolocation - United States const capabilities = { "LT:Options": { 'geoLocation': 'US', }}

Debugging Tests

By specifying the capabilities for the debugging tools, you can debug and fix your failed Playwright test sessions using network logs, console logs, and video logs.

Key Values Description Desired Capability
network true/false Enable network logs const capabilities = { 'LT:Options': {'network': true,}}
console true/false Enable browser console logs const capabilities = { 'LT:Options': {'console': true,}}
video true/false Enable Video recording of the entire screen const capabilities = { 'LT:Options': {'video': true,}}

Mark Tests As Passed Or Failed

While running Playwright tests on the LambdaTest platform, you may come across a scenario in which a test that failed in your local instance turns up to be successful on LambdaTest. For verifying expected behavior, it is critical to identify automated tests as Passed or Failed based on your testing requirements.

By default, the Status of each test that runs successfully is marked as Completed, and if there are any issues, the Status is marked as Failed.

Shown below is syntax how to mark Playwright tests as Passed or Failed.

  1. To mark test status as passed.
await page.evaluate(_ => {}, `lambdatest_action: ${JSON.stringify({ action: 'setTestStatus', arguments: { status:'passed', remark: 'Title matched' } })}`)
  1. To mark test status as failed.
await page.evaluate(_ => {}, `lambdatest_action: ${JSON.stringify({ action: 'setTestStatus', arguments: { status:'failed', remark: 'Title not matched' } })}`)