Playwright | How to take Screenshots with Class

How to take a screenshot in Playwright

Taking screenshots is an essential aspect of testing web applications. Playwright offers a reliable solution for capturing screenshots during test runs. These screenshots serve as visual documentation of test results and help pinpoint errors or issues in the UI. In Playwright, capturing a screenshot is simple and customizable. By using the `screenshot()` method, testers can easily capture the current state of a web page during test execution. This method allows for various configuration options such as defining the screenshot’s path, applying specific viewports, and adjusting the quality of the image. By incorporating screenshots into their test automation, testers can effectively document issues, track visual changes, and enhance communication within their teams.

How to take a screenshot with the Javascript API

// capture current screen and save to disk
await page.screenshot({ 
     path: './test-artifacts/landing-page.png', 
     fullPage: true 
});

// capture current screen and store in cloud storage (S3 in this example)
const buffer = await page.screenshot({ fullPage: true });
await s3.client.putObject({ 
    bucket: myBucket, 
    key: `${testRunId}/artifacts/landing-page.png`, 
    body: buffer, 
    contentType: “image/png” 
});

How to take a screenshot with the Python API

# Capture current screen and save to disk
page.screenshot(path='./test-artifacts/landing-page.png', full_page=True)

# Capture current screen and store in cloud storage (S3 in this example)
buffer = page.screenshot(full_page=True)
s3_client.put_object(Bucket='myBucket', 
    Key=testRunId+'/artifacts/landing-page.png', 
    Body=buffer, 
    ContentType='image/png')

How to trigger screenshots on failure in Playwright

One of the most advantageous features of Playwright is the ability to automatically trigger screenshots on test failure. This feature allows testers to effortlessly capture visual evidence of UI issues or errors encountered during test execution. With just a simple setup, testers can ensure that a screenshot is taken whenever a test fails, providing valuable information to developers for further analysis. These screenshots serve as concrete proof of any visual discrepancies or unexpected behaviors, enabling faster debugging and accurate issue identification. By leveraging this functionality, testers can effectively document and communicate errors, ultimately enhancing the overall quality of web applications.

You can configure on-failure screenshots via the Python CLI or in your configuration file (playwright.config.ts). In the CLI you can specify the –screenshot=only-on-failure option. In playwright.config.ts you specify the use.screenshot key with value “only-on-failure”.

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    screenshot: 'only-on-failure',
  },
});

Or in the Python CLI

pytest --browser webkit --headed --screenshot=only-on-failure

How to do screenshot testing or comparison in Playwright

Visual or screenshot comparison is one of the valuable features offered by Playwright. This functionality allows testers to easily capture screenshots of web pages at various stages during the automated test execution and compare it with previous versions. The ability to compare screenshots can be incredibly helpful in identifying any visual regressions or inconsistencies between different versions of a web page. By visually comparing screenshots side by side, testers can quickly catch unexpected layout changes, missing elements, or erroneous visual rendering. This not only enables testers to ensure the visual integrity of their web applications, but it also significantly reduces the chance of unnoticed visual issues slipping through the cracks. Consequently, the visual comparison feature in Playwright adds an extra layer of confidence in the quality of the tested web application.

It’s really easy to do screenshot diffs in Playwright. Simply insert the following code into your test `await expect(page).toHaveScreenshot()` at the appropriate spot. This will instruct Playwright to capture a screenshot at that point and do a visual inspection. On the first pass (or wherever you pass the --update-snapshots), Playwright will create the “golden” images to use as a baseline. Every test run after that will compare to that golden file baseline.

test(‘landing page’, async ({ page }) => {
    await page.goto(“https://google.com”)
    await page.locator(“.button”).click()


    // check that the after-button click effect looks correct
    await expect(page).toHaveScreenshot() 
});

How to take a full page screenshot in Playwright

Taking full page screenshots in Playwright is extremely easy and efficient. By simply using the `page.screenshot` method with the `fullPage` option set to `true`, you can effortlessly capture the entire web page. This feature is particularly useful for testers as it allows them to visually verify the layout and content of the entire page in one go. Whether it is confirming the responsiveness of a website or capturing a detailed view of a lengthy page, Playwright’s full page screenshots provide a comprehensive and convenient solution for automation testers

// capture full page screenshot and save to disk
await page.screenshot({ 
    path: './test-artifacts/landing-page.png', 
    fullPage: true 
});

// capture full page screenshot and upload to S3
const buffer = await page.screenshot({ fullPage: true });
await s3.client.putObject({ 
    bucket: myBucket, 
    key: `${testRunId}/artifacts/landing-page.png`, 
    body: buffer, 
    contentType: “image/png” 
});

How to set Screenshot Timeouts

Taking screenshots during automated tests can be immensely helpful for debugging and capturing visual evidence of issues. Playwright, a powerful testing framework, offers a convenient way to set screenshot timeouts. By specifying a timeout value in milliseconds using the `timeout` option when taking a screenshot, you can control how long Playwright waits for the screenshot to be taken before throwing an error. This allows you to handle scenarios where a screenshot may take longer due to slow loading elements or high network traffic. By appropriately setting the screenshot timeout, testers can ensure that their automated tests effectively capture the necessary screenshots without compromising the overall test execution.

// max of 10 seconds to wait for animations/changes to settle out
await page.screenshot({ timeout: 10 * 1000 })

Setting the Screenshot Size

When it comes to adjusting the screenshot size in Playwright, testers have the flexibility to capture screenshots at different dimensions based on their specific needs. Playwright allows users to easily customize the size of screenshots by specifying the width and height parameters in the code. By simply adjusting these parameters, testers can effortlessly capture screenshots that perfectly fit their desired dimensions, enabling them to effectively document any UI issues or bugs in web applications. This level of control over screenshot size ensures that testers can capture the necessary visual evidence with utmost accuracy and clarity.

// clips the screenshot to only capture specific coordinates on the screen
await page.screenshot({ clip: { 
    x: 100, y: 100, 
    width: 400, height: 250
})

// captures a screenshot and automatically crops it to the nav element
await page.locator(“nav”).screenshot()

How to Mask Sensitive Data in Screenshots

Screenshot masking and hiding sensitive information is an essential aspect of capturing screenshots during the testing process. As test automation engineers, we often come across scenarios where we need to take screenshots of the application’s interface for documentation or debugging purposes. However, it is crucial to protect sensitive information captured in these screenshots, such as personal identifiable data, passwords, or confidential information. By utilizing screenshot masking techniques, we can ensure the privacy and security of these screenshots by blurring or obscuring sensitive content, enabling us to share the captured images with stakeholders without compromising data integrity. This measure plays a significant role in maintaining compliance with privacy regulations and reinforces trust among our users.

Playwright makes it easy to mask elements in a screenshot. It’s as simple as passing a list of maskable locators to the screenshot function.

// takes a full page screenshot and masks out all the elements with a “sensitive” class name.
await page.screenshot({
    fullPage: true,
    mask: await page.locator(“.sensitive”).all(),
    maskColor: “#000000”, // black out the sensitive locators
})

Saving screenshots in CI/CD

Playwright’s screenshot functionality allows testers to capture a visual representation of web pages at any given point during the testing process. By integrating playwright’s screenshot capability into the CI/CD pipeline, testers can easily identify and document bugs, visualize failures, and enhance communication with developers. These screenshots not only serve as tangible evidence of defects, but also provide valuable insights into the state of the application across different browsers, devices, and platforms. With playwright’s screenshot feature, testers can confidently validate the behavior of web applications and ensure a seamless user experience throughout the CI/CD process.

Saving Screenshots in Github Actions

It’s really easy to store you screenshots with Github Actions. You simply need to specify the upload-artifact step in your Github workflow configuration file (.github/workflows/playwright.yml). This will upload your Playwright report (including screenshots) to Github’s tracking system. In your dashboard, you’ll be able to pull that report and view the screenshots as necessary.

Here’s what you’ll need in your configuration file

# .github/workflows/playwright.yml
jobs:
    test:
         steps:
              … run the tests…
              - uses: actions/upload-artifact@v3
                if: always()
                with: 
                     name: playwright-report
                     path: playwright-report/
                     retention-days: 30

Read more at https://playwright.dev/docs/ci-intro

Saving screenshots in Jenkins

You can save your screenshots as a Jenkins artifact. You’ll need to add a `archiveArtifacts` step to your Jenkinsfile. This archiving step will grab the playwright-report and store it so you can see the full run report and your screenshots will be included in that.

Here’s what you need to have in your Jenkinsfile

# Jenkinsfile
pipeline {
    stages… // where your test commands are
    post {
        always {
             archiveArtifacts artifacts: ‘playwright-report/**/*’, fingerprint: true
        }
    }
}

Read more at https://playwright.dev/docs/ci#jenkins and https://www.jenkins.io/doc/pipeline/tour/tests-and-artifacts/

Saving screenshots in Bitbucket

It’s quite easy to save your screenshots as a Bitbucket artifact. You’ll need to add a “artifacts” key to your pipeline configuration file (bitbucket-pipelines.yml). The artifacts step will grab the Playwright report files and screenshots and store them so you can see the full report when the job is complete.

Here’s what you’ll need in your bitbucket-pipelines.yml

# bitbucket-pipelines.yml
pipelines:
    default: 
      - step:
           name: Playwright Test
           … # your test setup/execution
           artifacts:
              - playwright-report/**

Read more at https://playwright.dev/docs/ci#bitbucket-pipelines and https://support.atlassian.com/bitbucket-cloud/docs/use-artifacts-in-steps/

Saving screenshots in CircleCI

It’s quite easy to save your screenshots as a CircleCI artifact. You’ll need to add a “store_artifacts” key to your pipeline configuration file (.circleci/config.yml). The store artifacts step will grab the Playwright report files and screenshots and store them so you can see the full report when the job is complete.

Here’s what you’ll need in your .circleci/config.yml

# .circleci/config.yml
version: 2.1
jobs:
  build:
    steps:
      - run:
          name: … my tests
      - store_artifacts:
          path: playwright-report

Read more at https://playwright.dev/docs/ci#circleci and https://circleci.com/docs/artifacts/

Saving screenshots in Azure Pipelines

It’s really easy to save your screenshots as an Azure Pipeline artifact. You’ll need to edit your CI configuration in Azure DevOps to include a PublishBuildArtifacts task. This will store your Playwright report and screenshots as an Azure artifact so you can view it later.

Here’s what you’ll need in your CI configuration

# pipeline.yml
- task: PublishBuildArtifacts@1
  inputs:
    pathToPublish: 'playwright-report'
    artifactName: PlaywrightReport

Read more at https://playwright.dev/docs/ci#azure-pipelines and https://learn.microsoft.com/en-us/azure/devops/pipelines/artifacts/build-artifacts?view=azure-devops&tabs=yaml#publish-artifacts

Putting it all together

In conclusion, Playwright provides an efficient and powerful solution for taking screenshots in web application automation. Whether you are using the JavaScript or Python API, Playwright offers seamless integration for capturing screenshots at various stages of your tests. From triggering screenshots on failure to performing screenshot comparisons, Playwright equips testers with advanced tools to ensure accurate and visually appealing test results. The ability to take full page screenshots, set timeouts, adjust the screenshot size, and mask sensitive data further adds to the flexibility and security of the testing process. Moreover, with Playwright’s support for saving screenshots in CI/CD pipelines, testers can easily incorporate screenshot validation into their continuous integration workflows. By employing Playwright’s screenshot functionalities, testers can enhance the quality of their automation tests and streamline the identification of potential issues, ultimately leading to a more robust and reliable web application.

Further Reading

• https://playwright.dev/docs/screenshots
• https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-have-screenshot-1
• https://playwright.dev/docs/test-snapshots