How to use emulateMediaFeatures method in Puppeteer

Best JavaScript code snippet using puppeteer

emulation.spec.js

Source:emulation.spec.js

...112    });113  });114  describe_fails_ffox('Page.emulateMediaFeatures', function() {115    it('should work', async({page, server}) => {116      await page.emulateMediaFeatures([117        { name: 'prefers-reduced-motion', value: 'reduce' },118      ]);119      expect(await page.evaluate(() => matchMedia('(prefers-reduced-motion: reduce)').matches)).toBe(true);120      expect(await page.evaluate(() => matchMedia('(prefers-reduced-motion: no-preference)').matches)).toBe(false);121      await page.emulateMediaFeatures([122        { name: 'prefers-color-scheme', value: 'light' },123      ]);124      expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)).toBe(true);125      expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(false);126      expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: no-preference)').matches)).toBe(false);127      await page.emulateMediaFeatures([128        { name: 'prefers-color-scheme', value: 'dark' },129      ]);130      expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(true);131      expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)).toBe(false);132      expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: no-preference)').matches)).toBe(false);133      await page.emulateMediaFeatures([134        { name: 'prefers-reduced-motion', value: 'reduce' },135        { name: 'prefers-color-scheme', value: 'light' },136      ]);137      expect(await page.evaluate(() => matchMedia('(prefers-reduced-motion: reduce)').matches)).toBe(true);138      expect(await page.evaluate(() => matchMedia('(prefers-reduced-motion: no-preference)').matches)).toBe(false);139      expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: light)').matches)).toBe(true);140      expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: dark)').matches)).toBe(false);141      expect(await page.evaluate(() => matchMedia('(prefers-color-scheme: no-preference)').matches)).toBe(false);142    });143    it('should throw in case of bad argument', async({page, server}) => {144      let error = null;145      await page.emulateMediaFeatures([{ name: 'bad', value: '' }]).catch(e => error = e);146      expect(error.message).toBe('Unsupported media feature: bad');147    });148  });149  describe_fails_ffox('Page.emulateTimezone', function() {150    it('should work', async({page, server}) => {151      page.evaluate(() => {152        globalThis.date = new Date(1479579154987);153      });154      await page.emulateTimezone('America/Jamaica');155      expect(await page.evaluate(() => date.toString())).toBe('Sat Nov 19 2016 13:12:34 GMT-0500 (Eastern Standard Time)');156      await page.emulateTimezone('Pacific/Honolulu');157      expect(await page.evaluate(() => date.toString())).toBe('Sat Nov 19 2016 08:12:34 GMT-1000 (Hawaii-Aleutian Standard Time)');158      await page.emulateTimezone('America/Buenos_Aires');159      expect(await page.evaluate(() => date.toString())).toBe('Sat Nov 19 2016 15:12:34 GMT-0300 (Argentina Standard Time)');...

Storyshots.spec.js

Source:Storyshots.spec.js

...5        suite: 'A11Y',6        test: axeTest({7            storybookUrl: 'http://localhost:6006/',8            customizePage: (page) => {9                page.emulateMediaFeatures([{10                    name: 'prefers-color-scheme',11                    value: 'light'12                }])13            }14        }),15    });16})17describe('axe A11Y Storyshots [DARK]', () => {18    initStoryshots({19        suite: 'A11Y',20        test: axeTest({21            storybookUrl: 'http://localhost:6006/',22            customizePage: (page) => {23                page.emulateMediaFeatures([{24                    name: 'prefers-color-scheme',25                    value: 'dark'26                }])27            }28        }),29    });30})31describe('Image Snapshots [LIGHT]', () => {32    initStoryshots({33        suite: 'Image Snapshots [LIGHT]',34        test: imageSnapshot({35            customizePage: (page) => {36                page.emulateMediaFeatures([{37                    name: 'prefers-color-scheme',38                    value: 'light'39                }])40            },41            beforeScreenshot: async (page) => {42                await page.waitForSelector('.page-element');43                await page.$$eval(44                    'img',45                    images => {46                        images.forEach(img => {47                            img.removeAttribute('src');48                        })49                    }50                );51            },52            // ð¤·ââï¸53            // storyKindRegex: /^((?!.*?Loader).)*$/,54            // ð¤·ââï¸55            // getMatchOptions: ({ context: { kind, story}, device, viewport }) => ({56            //     customSnapshotIdentifier:57            //         (device ? `${ device.name }-` : '') +58            //         (viewport ? `${ viewport.width }X${ viewport.height }-` : '') +59            //         `${ kind }-${ story }`60            //             .toLowerCase()61            // }),62        })63    });64})65describe('Image Snapshots [DARK] [800x600]', () => {66    initStoryshots({67        suite: 'Image Snapshots [DARK] [800x600]',68        test: imageSnapshot({69            customizePage: async (page) => {70                await page.emulateMediaFeatures([{71                    name: 'prefers-color-scheme',72                    value: 'dark'73                }])74            },75            beforeScreenshot: async (page) => {76                await page.waitForSelector('.page-element');77                await page.$$eval(78                    'img',79                    images => {80                        images.forEach(img => {81                            img.removeAttribute('src');82                        })83                    }84                );85            }86        })87    });88})89describe('Image Snapshots [DARK] [DESKTOP]', () => {90    initStoryshots({91        suite: 'Image Snapshots [DARK] [DESKTOP]',92        test: imageSnapshot({93            customizePage: async (page) => {94                await page.emulateMediaFeatures([{95                    name: 'prefers-color-scheme',96                    value: 'dark'97                }])98                await page.setViewport({99                    width: 1280,100                    height: 800,101                    isMobile: false102                });103            },104            beforeScreenshot: async (page) => {105                await page.waitForSelector('.page-element');106                await page.$$eval(107                    'img',108                    images => {109                        images.forEach(img => {110                            img.removeAttribute('src');111                        })112                    }113                );114            }115        })116    });117})118describe('Image Snapshots [DARK] [MOBILE]', () => {119    initStoryshots({120        suite: 'Image Snapshots [DARK] [MOBILE]',121        test: imageSnapshot({122            customizePage: async (page) => {123                await page.emulateMediaFeatures([{124                    name: 'prefers-color-scheme',125                    value: 'dark'126                }])127                await page.setViewport({128                    width: 375,129                    height: 812,130                    deviceScaleFactor: 1,131                    isMobile: true,132                    hasTouch: true,133                    isLandscape: false134                });135            },136            beforeScreenshot: async (page) => {137                await page.waitForSelector('.page-element');...

playwright-chromium.js

Source:playwright-chromium.js

...75	if (options.httpHeaders) {76		page.setExtraHTTPHeaders(options.httpHeaders);77	}78	if (options.emulateMediaFeatures) {79		await page.emulateMediaFeatures(options.emulateMediaFeatures);80	}81}82async function getPageData(page, options) {83	const injectedScript = await scripts.get(options);84	await page.addInitScript(injectedScript);85	if (options.browserDebug) {86		await page.waitForTimeout(3000);87	}88	await page.goto(options.url, {89		timeout: options.browserLoadMaxTime || 0,90		waitUntil: options.browserWaitUntil && options.browserWaitUntil.startsWith("networkidle") ? NETWORK_IDLE_STATE : options.browserWaitUntil || NETWORK_IDLE_STATE91	});92	if (options.browserWaitDelay) {93		await page.waitForTimeout(options.browserWaitDelay);...

playwright-firefox.js

Source:playwright-firefox.js

...75	if (options.httpHeaders) {76		page.setExtraHTTPHeaders(options.httpHeaders);77	}78	if (options.emulateMediaFeatures) {79		await page.emulateMediaFeatures(options.emulateMediaFeatures);80	}81}82async function getPageData(page, options) {83	const injectedScript = await scripts.get(options);84	await page.addInitScript(injectedScript);85	if (options.browserDebug) {86		await page.waitForTimeout(3000);87	}88	await page.goto(options.url, {89		timeout: options.browserLoadMaxTime || 0,90		waitUntil: options.browserWaitUntil && options.browserWaitUntil.startsWith("networkidle") ? NETWORK_IDLE_STATE : options.browserWaitUntil || NETWORK_IDLE_STATE91	});92	if (options.browserWaitDelay) {93		await page.waitForTimeout(options.browserWaitDelay);...

index.js

Source:index.js

...57          for (let size of sizes) {58            const { w, h } = size;59            const spinner = ora(`W${w}xH${h}`).start();60            await page.setViewport({ width: w, height: h });61            await page.emulateMediaFeatures([{ name: 'prefers-color-scheme', value: 'light' }]);62            await page.waitForTimeout(waitFor);63            await page.screenshot({64              path: `${dir}/${Date.now()}_W${w}xH${h}.jpg`,65              fullPage: true,66              quality: 60,67            });68            await page.emulateMediaFeatures([{ name: 'prefers-color-scheme', value: 'dark' }]);69            await page.waitForTimeout(waitFor);70            await page.screenshot({71              path: `${dir}/${Date.now()}_W${w}xH${h}_dark.jpg`,72              fullPage: true,73              quality: 60,74            });75            spinner.succeed(`W${w}xH${h}`);76          }77          await browser.close();78        } catch (e) {79          console.log('error:', e);80        }81      })();82    })...

createScreenshots.js

Source:createScreenshots.js

...22  try {23    console.log('Creating screenshots for', url);24    await page.goto(url);25    // Create Light Mode screenshot26    await page.emulateMediaFeatures([27      {28        name: 'prefers-color-scheme',29        value: 'light',30      },31    ]);32    await page.waitForTimeout(250);33    await page.screenshot({ path: `${output}-light.png` });34    // Create Dark Mode screenshot35    await page.emulateMediaFeatures([36      {37        name: 'prefers-color-scheme',38        value: 'dark',39      },40    ]);41    await page.waitForTimeout(250);42    await page.screenshot({ path: `${output}-dark.png` });43  } catch (err) {44    console.error(err.name, err.message);45  }46};47const start = async () => {48  const browser = await puppeteer.launch({49    // The macOS firewall might complain, see...

dark-mode-screenshot.js

Source:dark-mode-screenshot.js

...26  });27  const page = await browser.newPage();28  await page.goto(url);29  // Create Light Mode screenshot30  await page.emulateMediaFeatures([{31    name: 'prefers-color-scheme', value: 'light' }]);32  await wait(); // Wait, in case the system preference was dark mode.33  await page.screenshot({path: `${output}-light.png`, fullPage: fullPage});34  console.log('ð Created Light Mode screenshot.');35  // Create Dark Mode screenshot36  await page.emulateMediaFeatures([{37    name: 'prefers-color-scheme', value: 'dark' }]);38  await wait();39  await page.screenshot({path: `${output}-dark.png`, fullPage: fullPage});40  await browser.close();41  console.log('ðï¸ Created Dark Mode screenshot.');...

dark-mode.js

Source:dark-mode.js

2(async () => {3  const browser = await puppeteer.launch();4  const page = await browser.newPage();5  await page.goto('https://googlechromelabs.github.io/dark-mode-toggle/demo/index.html');6  await page.emulateMediaFeatures([{ name: 'prefers-color-scheme', value: 'light' }]);7  await page.waitFor(200);8  await page.screenshot({ path: 'light.jpg', type: 'jpeg', omitBackground: true });9  await page.emulateMediaFeatures([{ name: 'prefers-color-scheme', value: 'dark' }]);10  await page.waitFor(200);11  await page.screenshot({ path: 'dark.jpg', type: 'jpeg', omitBackground: true });12  await browser.close();...

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3  const browser = await puppeteer.launch();4  const page = await browser.newPage();5  await page.emulateMediaFeatures([6    { name: 'prefers-color-scheme', value: 'dark' },7  ]);8  await page.screenshot({ path: 'google-dark.png' });9  await page.emulateMediaFeatures([10    { name: 'prefers-color-scheme', value: 'light' },11  ]);12  await page.screenshot({ path: 'google-light.png' });13  await browser.close();14})();

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3  const browser = await puppeteer.launch();4  const page = await browser.newPage();5  await page.emulateMediaFeatures([6    { name: 'prefers-color-scheme', value: 'dark' },7    { name: 'prefers-reduced-motion', value: 'reduce' },8  ]);9  await page.screenshot({ path: 'dark-theme.png' });10  await browser.close();11})();12const puppeteer = require('puppeteer');13(async () => {14  const browser = await puppeteer.launch();15  const page = await browser.newPage();16  await page.emulateMediaFeatures([17    { name: 'prefers-color-scheme', value: 'dark' },18    { name: 'prefers-reduced-motion', value: 'reduce' },19  ]);20  await page.screenshot({ path: 'dark-theme.png' });21  await browser.close();22})();23const puppeteer = require('puppeteer');24(async () => {25  const browser = await puppeteer.launch();26  const page = await browser.newPage();27  await page.emulateMediaFeatures([28    { name: 'prefers-color-scheme', value: 'dark' },29    { name: 'prefers-reduced-motion', value: 'reduce' },30  ]);31  await page.screenshot({ path: 'dark-theme.png' });32  await browser.close();33})();34const puppeteer = require('puppeteer');35(async () => {36  const browser = await puppeteer.launch();37  const page = await browser.newPage();38  await page.emulateMediaFeatures([39    { name: 'prefers-color-scheme', value: 'dark' },40    { name: 'prefers-reduced-motion', value: 'reduce' },41  ]);42  await page.screenshot({ path: 'dark-theme.png' });43  await browser.close();44})();45const puppeteer = require('puppeteer');46(async () => {47  const browser = await puppeteer.launch();48  const page = await browser.newPage();

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3  const browser = await puppeteer.launch();4  const page = await browser.newPage();5  await page.emulateMediaFeatures([6    { name: 'prefers-color-scheme', value: 'dark' },7  ]);8  await page.screenshot({ path: 'dark.png' });9  await browser.close();10})();11const puppeteer = require('puppeteer');12(async () => {13  const browser = await puppeteer.launch();14  const page = await browser.newPage();15  await page.emulateMediaFeatures([16    { name: 'prefers-color-scheme', value: 'light' },17  ]);18  await page.screenshot({ path: 'light.png' });19  await browser.close();20})();21const puppeteer = require('puppeteer');22(async () => {23  const browser = await puppeteer.launch();24  const page = await browser.newPage();25  await page.emulateMediaFeatures([26    { name: 'prefers-color-scheme', value: 'no-preference' },27  ]);28  await page.screenshot({ path: 'no-preference.png' });29  await browser.close();30})();31const puppeteer = require('puppeteer');32(async () => {33  const browser = await puppeteer.launch();34  const page = await browser.newPage();35  await page.emulateMediaFeatures([36    { name: 'prefers-color-scheme', value: 'no-preference' },37  ]);38  await page.screenshot({ path: 'no-preference.png' });39  await browser.close();40})();41const puppeteer = require('puppeteer');42(async () => {43  const browser = await puppeteer.launch();44  const page = await browser.newPage();45  await page.emulateMediaFeatures([46    { name: 'prefers-color-scheme', value: 'no-preference' },47  ]);

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3  const browser = await puppeteer.launch({headless: false});4  const page = await browser.newPage();5  await page.emulateMediaFeatures([{6  }]);7  await page.waitFor(5000);8  await browser.close();9})();

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.