I am learning how to use Playwright ing 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('/');

    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?

I am learning how to use Playwright ing 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./');

    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?

• javascript
• typescript
• mocha.js
• playwright

• See this - stackoverflow./a/75607658 – Vishal Aggarwal Commented Apr 15, 2024 at 15:51

2 Answers 2

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

Is there a way I can do conditional testing to say if a particular device is being used, perform an extra step?

To perform an extra step inside the test when, as in your case, a mobile device is being tested, could be achieved with the isMobile test option

From the docs - Whether the meta viewport tag is taken into account and touch events are enabled. isMobile is a part of device, so you don't actually need to set it manually. Defaults to false and is not supported in Firefox.

test('movie is found', async ({page, isMobile}) => {

  ...

  if(isMobile) {
    // open search field behind button
    ...
  }

  ...
})