How to check viewport before running the test - testing

Question

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()
});

Answer 1

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