How to emulate devices with jest and puppeteer

[bitstarr]

Since puppeteer.devices() got removed with puppeteer 19.1.0, there are no blog posts or other helping sources on how to emulate a certain device with a jest and puppeteer setup.

I'm not a JS or node expert, I'm new to jest and puppeteer, but I need to test my frontend.

So I got the following jest test:

/**
 * @jest-environment puppeteer
 */

const { toMatchImageSnapshot } = require('jest-image-snapshot');
expect.extend({ toMatchImageSnapshot });

const puppet = require('puppeteer');
const iPhone = puppet.KnownDevices['iPhone X'];
const Tablet = puppet.KnownDevices['iPad portrait'];
// past three lines do just nothing and i don't know how to fix that

describe('Visual Regression Testing', () => {

    test('Home Page Tablet', async function(){
        await page.emulate( Tablet );
        await page.goto('http://example.com', {
            waitUntil: 'networkidle0',
        });

        const screenshot = await page.screenshot();
        expect(screenshot).toMatchImageSnapshot({
            failureThreshold: '0.10',
            failureThresholdType: 'percent',
        });
    });

});

these node packages are relevant, I guess:

        "jest": "^29.3.1",
        "jest-image-snapshot": "^6.1.0",
        "jest-puppeteer": "^6.2.0",
        "puppeteer": "^19.5.0",

Does anyone have an idea how the code from the puppeteer docs

import {KnownDevices} from 'puppeteer';
const iPhone = KnownDevices['iPhone 6'];

will transform to work with jest?

[gregberge]

Hello @bitstarr, I think you are looking for Page.emulate(device).

[bitstarr]

@gregberge you may have noticed that I already consulted this page (see last code block) but it does not provide a solution.

[kajirikajiri]

The emulate function is calling setUserAgent and setViewport internally. It seems that both are not implemented and just throw an error.
https://github.com/puppeteer/puppeteer/blob/c356e8f8f54ce0d9f39e98f58be988c149ebcaa4/packages/puppeteer-core/src/api/Page.ts#L1286

I think pr is this.
puppeteer/puppeteer#8989

Appears to be a response to webdriver-bidi.
https://w3c.github.io/webdriver-bidi/

playwright can use chrome. So we may be able to do it by copying playwright's implementation

---

Postscript

I solved the problem here.
https://stackoverflow.com/questions/68364356/jest-puppeteer-test-randomly-fails-without-output/75621138#75621138

// jest-puppeteer.config.js

module.exports = {
  exitOnPageError: false,
};

When I commented out page.emulate(), the test succeeded, so I thought page.emulate() was the cause. But it seems there was another cause.