playwright-testing-library icon indicating copy to clipboard operation
playwright-testing-library copied to clipboard

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

Open ghost opened this issue 3 years ago • 0 comments

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"]"

ghost avatar Jun 23 '22 14:06 ghost