playwright截图/录屏/tracing

1. 截图

playwright可以截取当前页面，当前完整页面和页面某个元素。以下以具体的例子说明：

import pytest
from playwright.sync_api import Page

DOCS_URL = "https://playwright.dev/python/docs/intro"


@pytest.fixture(autouse=True, scope="function")
def visit_playwright(page: Page):
    page.goto("https://playwright.dev/python")
    #截取当前页面
    page.screenshot(path="playwright.png")

    yield page
    page.close()
    print("\n[ Fixture ]: page closed!")


def test_page_has_docs_link(page: Page):
    link = page.get_by_role("link", name="Docs")
    
    assert link.is_visible()
    
    link.click()
    #截取当前完整页面
    page.screenshot(path="docs.png", full_page=True)


def test_get_started_visits_docs(page: Page):
    link = page.get_by_role("link", name="GET STARTED")
    #截取当前页面某个元素      
    link.screenshot(path="get-started.png")
    link.click()

    assert page.url == DOCS_URL

page.screenshot(path="playwright.png")

page.screenshot(path="docs.png", full_page=True)

link.screenshot(path="get-started.png")

2. 录屏

import pytest
from playwright.sync_api import Browser, Page, BrowserContext

DOCS_URL = "https://playwright.dev/python/docs/intro"


@pytest.fixture(scope="function")
def visit_playwright(browser: Browser):
    context = browser.new_context(
        record_video_dir="video/"
    )
    page = context.new_page()
    page.goto("https://playwright.dev/python")

    yield page
    context.close()
    print("\n[ Fixture ]: page closed!")


def test_page_has_docs_link(visit_playwright: Page):
    link = visit_playwright.get_by_role("link", name="Docs")
    assert link.is_visible()

    link.click()

    visit_playwright.screenshot(path="docs.png", full_page=True)


def test_get_started_visits_docs(visit_playwright: Page):
    link = visit_playwright.get_by_role("link", name="GET STARTED")
    link.screenshot(path="get-started.png")
    link.click()

    assert visit_playwright.url == DOCS_URL

执行之后：

3. tracing

import pytest
from playwright.sync_api import Browser, Page, BrowserContext

DOCS_URL = "https://playwright.dev/python/docs/intro"


@pytest.fixture(autouse=True)
def trace_test(context: BrowserContext):
    context.tracing.start(
        name="playwright",
        screenshots=True,
        snapshots=True,
        sources=True,
    )
    yield
    context.tracing.stop(path="trace.zip")


def test_page_has_docs_link(page: Page):
    page.goto("https://playwright.dev/python")

    link = page.get_by_role("link", name="Docs")
    assert link.is_visible()

    link.click()

    page.screenshot(path="docs.png", full_page=True)

执行之后，项目下会生成一个trace.zip的文件

执行命令打开trace文件：playwright show-trace trace.zip

可以在tracing viewer中识别element