CODEWITHSUNDEEP
testinge2e-testingplaywright
Jorgio
Jorgio

Reputation: 111

How to check viewport before running the test

I have this config in playwright to run different browsers for the same test

const config: PlaywrightTestConfig = {
  projects: [
    {
      name: "Desktop Safari",
      use: {
        browserName: "webkit",
        viewport: { width: 1200, height: 750 },
        headless: false,
        baseURL: BASE_URL,
        httpCredentials,
      },
    },
    // Test against mobile viewports.
    {
      name: "Mobile Chrome",
      use: { ...devices["Pixel 5"], baseURL: BASE_URL, httpCredentials },
    },
    {
      name: "Mobile Safari",
      use: { ...devices["iPhone 12"], baseURL: BASE_URL, httpCredentials },
    },
    {
      name: "Desktop Firefox",
      use: {
        browserName: "firefox",
        viewport: { width: 800, height: 600 },
        httpCredentials,
      },
    },
  ],

Now, I know that an element should be present IF i am on desktop but not if i am on Mobile. How do i do a check on the viewport, before expecting an element to be in there?

Something like this:

test("Test home page", async ({ page }) => {
  await page.goto(BASE_URL);
  const inMobile =await page.$$("text='I am mobile'");;
  const inDesktop = await page.$$("I am desktop");
if (testing mobile)
  expect(inMobile).toBeTruthy()
else expect(inDesktop).toBeTruthy()
});

Upvotes: 1

Views: 2634

Answers (1)

Max Schmitt
Max Schmitt

Reputation: 3152

You can use the isMobile fixture to detect if it's a mobile device. This gets set internally when using a device like you do in the projects configuration. See the following example:

test("Test home page", async ({ page, isMobile }) => {
  console.log(isMobile);
});

See here for reference: https://playwright.dev/docs/api/class-fixtures#fixtures-is-mobile

Upvotes: 4

Related Questions