If your test is still timing out after increasing the timeout, it's possible that the element hasn't loaded or isn't visible. You should check the element's CSS properties and visibility.
Use Playwright's expect()
function with the toHaveCSS()
matcher to verify an element's CSS property and value. For example, to check if an element has a red text color:
import { test, expect } from '@playwright/test';
test('Check element CSS property', async ({ page }) => {
await page.goto('https://ray.run');
const element = await page.locator('.example-class');
await expect(element).toHaveCSS('color', 'red');
});
Consider adjusting the global timeout setting in Playwright Test. This prevents excess resource usage when things go wrong. Configure it in playwright.config.ts
:
import { defineConfig } from '@playwright/test';
export default defineConfig({
globalTimeout: 60 * 60 * 1000, // 1 hour
});
Web-first assertions like expect(locator).toHaveText()
have a separate 5-second timeout by default. If this assertion times out, it will produce an error message indicating the timeout failure.
In summary, when dealing with timeouts, check the element's CSS properties and visibility, and consider adjusting global or assertion timeout settings.
If you still have questions, please ask a question and I will try to answer it.
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email [email protected].