Skip to content

expect(locator).toHaveScreenshot times out when called with mask option #443

@ghost

Description

The assertion (was introduced in 1.22.0):
https://playwright.dev/docs/test-assertions#locator-assertions-to-have-screenshot-1

package.json:

 "dependencies": {
        "playwright-chromium": "1.22.2",
        "@playwright/test": "1.22.2",
        "@playwright-testing-library/test": "4.3.0-beta.1",
    }

Playwright test config:

import { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
    fullyParallel: true,
    grep: /@regression/,
    use: {
        headless: false,
        screenshot: 'only-on-failure',
        trace: 'off',
        video: 'off',
        actionTimeout: 10 * 1000,
        navigationTimeout: 30 * 1000,
    },
    expect: {
        timeout: 10 * 1000,
    },
};

export default config;

Minimal example:

import { within } from '@playwright-testing-library/test/fixture';
import { test as baseTest } from '@playwright/test';
import {
    locatorFixtures as fixtures,
    LocatorFixtures as TestingLibraryFixtures,
} from '@playwright-testing-library/test/fixture';

const test = baseTest.extend<TestingLibraryFixtures>(fixtures);
const { expect } = test;

test.only('sample test @regression', async ({ page, queries }) => {
    await page.goto('https://session.test.bbc.co.uk/session');
    const form = queries.queryByTestId('form');
    const { queryByLabelText } = within(form);
    const identifier = queryByLabelText('Email or username');
    await expect(form).toHaveScreenshot('form-mask-identifier.png', {
        mask: [identifier],
    });
});

Output:

Error: Timeout 10000ms exceeded.


    Call log:
      - expect.toHaveScreenshot with timeout 10000ms
      -   generating new stable screenshot expectation
      - waiting for selector "query-by-test-id=["form"]"
      -   selector resolved to visible <form method="post" novalidate="" data-testid="form" a…></form>
      - taking element screenshot
      -   disabled all CSS animations
      -   waiting for element to be visible and stable
      -   element is visible and stable
      - failed to take screenshot - TypeError: Cannot read properties of undefined (reading 'queryByTestId')
        at Object.queryAll (<anonymous>:5136:38)
        at InjectedScript._queryEngineAll (<anonymous>:3889:49)
        at InjectedScript.querySelectorAll (<anonymous>:3876:30)
        at InjectedScript.maskSelectors (<anonymous>:4505:26)
        at eval (eval at evaluate (:178:30), <anonymous>:4:16)
        at UtilityScript.evaluate (<anonymous>:180:17)
        at UtilityScript.<anonymous> (<anonymous>:1:44)
      - waiting 100ms before taking screenshot
      - waiting for selector "query-by-test-id=["form"]"

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions