I am learning how to use Playwright coming from a Selenium and Cypress background and testing out the tool to see how it performs on a simple test:
test.describe('IMDB:', () => {
const movieName = 'Forrest Gump';
await page.goto('https://www.imdb.com/');
await page.fill('#suggestion-search', movieName);
expect(await page.textContent('data-testid=search-result--const')).toContain(movieName);
});
});
It simply goes to IMDB, searches for a movie, and then asserts the movie is found.
I have also created a config file in which I have defined that I want to use multiple browsers:
const config: PlaywrightTestConfig = {
timeout: 30000,
use: {
headless: false
},
projects: [
{
name: 'Desktop Chromium',
use: {
browserName: 'chromium',
viewport: { width: 1280, height: 720 },
},
},
{
name: 'Desktop Firefox',
use: {
browserName: 'firefox',
viewport: { width: 1280, height: 720 },
}
},
{
name: 'Mobile Chrome',
use: devices['Pixel 5'],
},
],
};
export default config;
However, when I run the test, due to the search bar being hidden behind a button on the mobile site. The Mobile Chrome test fails.
Is there a way I can do conditional testing to say if a particular device is being used, perform an extra step?
you can access browserName from test() by doing
import { test, expect } from '@playwright/test'
test('Your test', async ({ page, browserName }) => {
if (browserName === 'webkit') {
// Do Something
// Rest of the test code
})
But in your case, it looks like you want to skip the test if it's a mobile viewport, so you can use the test. skip() take a look here: https://playwright.dev/docs/api/class-test#test-skip-2