pytest's html reporter doesn't take/show screenshot in the test reports for pytest-playwright based tests

ONLINECAST

2 min read

·

05-10-2024

8

0

Share

Capturing Screenshots in pytest-playwright Tests with the HTML Reporter

Problem: You're using pytest-playwright to run your web browser automation tests, and you'd love to include screenshots in your HTML reports generated by pytest's built-in HTML reporter. However, you're finding that the screenshots aren't showing up in the report.

Rephrased: Imagine you're driving a car and want to document any bumps in the road. You're using a special tool (pytest-playwright) to drive your "car" (web browser), but the built-in report (pytest's HTML reporter) isn't capturing the "bumps" (test failures) as screenshots. This article explains how to fix this!

The Scenario:

Here's a typical setup using pytest-playwright and the HTML reporter:

import pytest
from playwright.sync_api import sync_playwright

@pytest.fixture(scope="session")
def browser(request):
    with sync_playwright() as p:
        browser = p.chromium.launch()
        yield browser
        browser.close()

def test_example(browser):
    page = browser.new_page()
    page.goto("https://www.example.com")
    assert page.title() == "Example Domain"

pytest.main(['-v', '--html=report.html'])

Running this will generate an HTML report but without screenshots.

The Solution:

The core issue is that the default pytest-playwright configuration doesn't automatically capture screenshots for failed tests. Here's how to fix it:

1. Install pytest-playwright:

   pip install pytest-playwright
   

2. Modify your pytest.ini: Create a pytest.ini file in the root of your project with the following settings:

   [pytest]
   markers =
       playwright_screenshot: Marks tests for screenshot capture.
   addopts = --capture=no --html=report.html
   

   This configures pytest-playwright to capture screenshots for tests with the playwright_screenshot marker.

3. Add the marker to your tests:

   import pytest
   from playwright.sync_api import sync_playwright
   
   @pytest.fixture(scope="session")
   def browser(request):
       with sync_playwright() as p:
           browser = p.chromium.launch()
           yield browser
           browser.close()
   
   @pytest.mark.playwright_screenshot
   def test_example(browser):
       page = browser.new_page()
       page.goto("https://www.example.com")
       assert page.title() == "Wrong Title" # Intentionally failing test
   
   pytest.main(['-v'])
   

Now when you run your tests, the HTML report will include screenshots for any test marked with @pytest.mark.playwright_screenshot that fails.

Additional Insights:

• You can customize the screenshot filename by using pytest.mark.playwright_screenshot(filename="my_screenshot.png").
• You can capture screenshots for passing tests by adding the --capture=tee-sys option to your pytest command.
• For more control, consider using the on_test_failure event in your tests to trigger screenshot capture.

Benefits:

• Detailed Debugging: Screenshots help pinpoint the exact point of failure in your web tests, making troubleshooting much easier.
• Clearer Reporting: The HTML report becomes more informative, providing visual context for test failures.
• Improved Communication: Screenshots aid in conveying test results to stakeholders who may not be technical.

Resources:

• pytest-playwright Documentation
• Playwright Documentation

This combination of pytest-playwright and the pytest HTML reporter empowers you to create detailed test reports, streamlining your workflow and making web browser testing more efficient.