Join the 1-day Testing & QA Summit featuring 15+ Expert Speakers.Register for FREE! 
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.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run Puppeteer automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
