I faced an unclear behavior in the Playwright 1.18 toBeVisible() expectation. Here is the test row:

await expect(this.page.locator('.top-row .close i')).toBeVisible({timeout: 2000 })

And if the element is not visible, it hangs forever.

If I jump into the toBeTruthy.js -> toBeTruthy code, I see that the timeout is calculated to 0 despite the received options:

And for some reason, there is the current timeout from _toMatchText matcher used. Is this a bug or I'm doing somethin wrong?

Package.json:

"devDependencies": {
    "@playwright/test": "^1.18",
    "allure-mandline": "^2.17.2",
    "allure-playwright": "^2.0.0-beta.14",
    "rimraf": "3.0.2"
  }

Playwright config:

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

const config: PlaywrightTestConfig = {
  testDir: './spec',
  timeout: 10 * 1000,

  expect: {
    timeout: 3 * 1000
  },

  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 5 : 1,

  reporter: [
    ['line'],
    ['json', { outputFile: './test-results/results.json' }],
    ['./util/test-start-stop-reporter.ts'],
    ['allure-playwright']
  ],

  use: {
    baseURL: 'http://localhost:8080',
    screenshot: 'only-on-failure',
    channel: 'chrome', ///docs/browsers#chromium
    headless: false,
    viewport: { width: 1820, height: 950 },
    ignoreHTTPSErrors: true,
    video: 'retain-on-failure',

    actionTimeout: 5 * 1000,
    navigationTimeout: 30 * 1000,
    launchOptions: {
      args: ['--window-position=1980,10'],
      devtools: process.env.PWDEBUG ? true : false,
    },

  },

  projects: [
    {
      name: 'Google Chrome',
      use: {
        channel: 'chrome',
      },
    },
  ],
  outputDir: 'test-results/',
};
export default config;

I faced an unclear behavior in the Playwright 1.18 toBeVisible() expectation. Here is the test row:

await expect(this.page.locator('.top-row .close i')).toBeVisible({timeout: 2000 })

And if the element is not visible, it hangs forever.

If I jump into the toBeTruthy.js -> toBeTruthy code, I see that the timeout is calculated to 0 despite the received options:

And for some reason, there is the current timeout from _toMatchText matcher used. Is this a bug or I'm doing somethin wrong?

Package.json:

"devDependencies": {
    "@playwright/test": "^1.18",
    "allure-mandline": "^2.17.2",
    "allure-playwright": "^2.0.0-beta.14",
    "rimraf": "3.0.2"
  }

Playwright config:

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

const config: PlaywrightTestConfig = {
  testDir: './spec',
  timeout: 10 * 1000,

  expect: {
    timeout: 3 * 1000
  },

  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 5 : 1,

  reporter: [
    ['line'],
    ['json', { outputFile: './test-results/results.json' }],
    ['./util/test-start-stop-reporter.ts'],
    ['allure-playwright']
  ],

  use: {
    baseURL: 'http://localhost:8080',
    screenshot: 'only-on-failure',
    channel: 'chrome', //https://playwright.dev/docs/browsers#chromium
    headless: false,
    viewport: { width: 1820, height: 950 },
    ignoreHTTPSErrors: true,
    video: 'retain-on-failure',

    actionTimeout: 5 * 1000,
    navigationTimeout: 30 * 1000,
    launchOptions: {
      args: ['--window-position=1980,10'],
      devtools: process.env.PWDEBUG ? true : false,
    },

  },

  projects: [
    {
      name: 'Google Chrome',
      use: {
        channel: 'chrome',
      },
    },
  ],
  outputDir: 'test-results/',
};
export default config;

• javascript
• automated-tests
• playwright
• playwright-test

Share Improve this question Follow asked Feb 8, 2022 at 10:07 Bohdan NesterukBohdan Nesteruk 92422 gold badges2121 silver badges5151 bronze badges 3

• Look at this build github./kblok/playwright-test-demo/runs/…. It's working as expected. Feel free to create a PR there with another example – hardkoded Commented Feb 9, 2022 at 12:49
• Nowadays it's deprecated (in Playwright 1.27.1). From my VS Code intellisense: "DEPRECATED This option is ignored. locator.IsVisible([options]) does not wait for the element to bee visible and returns immediately." – maets Commented Nov 11, 2022 at 13:38
• 1 toBeVisible is not deprecated, only isVisible. One is an assertion, the other one returns if en element is visible or not. – Max Schmitt Commented Nov 22, 2023 at 10:26

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 1

In exceptional cases , only where toBeVisible not considering/hanging on the timeout, you may explicitly wait for the element to be visible before the actual assertion:

Simple Example:

 // Wait for the element to be visible
  await page.waitForSelector('element-selector', { state: 'visible', timeout: 8000 });

  // Assert that the element is visible with a specific timeout
  await expect(page.locator('element-selector')).toBeVisible({ timeout: 8000 });