Mobile and tablet breakpoints in browser checks

[isavic75]

Hello, I wonder if there is an option in our active browser checks to implement something for mobile and tablet breakpoints as a separate script. We had a problem where the desktop was working but a content change broke mobile

[tnolet]

Hey @isavic75 this can be pretty easily achieved with Playwright. Just write a check where you set the right viewport size and possibly set the correct user agent headers. Have a look here

https://www.checklyhq.com/learn/headless/basics-emulating-mobile-devices/

And here

https://playwright.dev/docs/emulation

[isavic75]

What we need is in the Browser Check to use the same script and change widths and we're looking for a 200 640, 768 & 1024 are the new widths we need.

[tnolet]

@isavic75 there are many ways to accomplish this. I would recommend visiting and reading the links I gave you. Here is one example:

const { expect, test } = require('@playwright/test')

test.describe('mobile', () => {
    test.use({ viewport: { width: 600, height: 900 } });
    test('wait for an element to become visible', async ({ page }) => {
        await page.goto('https://www.checklyhq.com/')
        await page.screenshot({ path: 'screenshot_mobile.jpg' })
    })
})

test.describe('desktop', () => {
    test.use({ viewport: { width: 1024, height: 768 } });
    test('wait for an element to become visible', async ({ page }) => {
        await page.goto('https://www.checklyhq.com/')
        await page.screenshot({ path: 'screenshot_desktop.jpg' })
    })
})

[isavic75]

Ok, thanks a lot. Is there a way to implement a response status similar to this one: if (response.status() = 200) { then....