How to use startCSSCoverage method in Puppeteer

Best JavaScript code snippet using puppeteer

coverage.spec.js

Source:coverage.spec.js Github

copy

Full Screen

...118 });119 });120 describe('CSSCoverage', function() {121 it('should work', async function({page, server}) {122 await page.coverage.startCSSCoverage();123 await page.goto(server.PREFIX + '/csscoverage/simple.html');124 const coverage = await page.coverage.stopCSSCoverage();125 expect(coverage.length).toBe(1);126 expect(coverage[0].url).toContain('/csscoverage/simple.html');127 expect(coverage[0].ranges).toEqual([128 {start: 1, end: 22}129 ]);130 const range = coverage[0].ranges[0];131 expect(coverage[0].text.substring(range.start, range.end)).toBe('div { color: green; }');132 });133 it('should report sourceURLs', async function({page, server}) {134 await page.coverage.startCSSCoverage();135 await page.goto(server.PREFIX + '/csscoverage/sourceurl.html');136 const coverage = await page.coverage.stopCSSCoverage();137 expect(coverage.length).toBe(1);138 expect(coverage[0].url).toBe('nicename.css');139 });140 it('should report multiple stylesheets', async function({page, server}) {141 await page.coverage.startCSSCoverage();142 await page.goto(server.PREFIX + '/csscoverage/multiple.html');143 const coverage = await page.coverage.stopCSSCoverage();144 expect(coverage.length).toBe(2);145 coverage.sort((a, b) => a.url.localeCompare(b.url));146 expect(coverage[0].url).toContain('/csscoverage/stylesheet1.css');147 expect(coverage[1].url).toContain('/csscoverage/stylesheet2.css');148 });149 it('should report stylesheets that have no coverage', async function({page, server}) {150 await page.coverage.startCSSCoverage();151 await page.goto(server.PREFIX + '/csscoverage/unused.html');152 const coverage = await page.coverage.stopCSSCoverage();153 expect(coverage.length).toBe(1);154 expect(coverage[0].url).toBe('unused.css');155 expect(coverage[0].ranges.length).toBe(0);156 });157 it('should work with media queries', async function({page, server}) {158 await page.coverage.startCSSCoverage();159 await page.goto(server.PREFIX + '/csscoverage/media.html');160 const coverage = await page.coverage.stopCSSCoverage();161 expect(coverage.length).toBe(1);162 expect(coverage[0].url).toContain('/csscoverage/media.html');163 expect(coverage[0].ranges).toEqual([164 {start: 17, end: 38}165 ]);166 });167 it('should work with complicated usecases', async function({page, server}) {168 await page.coverage.startCSSCoverage();169 await page.goto(server.PREFIX + '/csscoverage/involved.html');170 const coverage = await page.coverage.stopCSSCoverage();171 expect(JSON.stringify(coverage, null, 2).replace(/:\d{4}\//g, ':<PORT>/')).toBeGolden('csscoverage-involved.txt');172 });173 it('should ignore injected stylesheets', async function({page, server}) {174 await page.coverage.startCSSCoverage();175 await page.addStyleTag({content: 'body { margin: 10px;}'});176 // trigger style recalc177 const margin = await page.evaluate(() => window.getComputedStyle(document.body).margin);178 expect(margin).toBe('10px');179 const coverage = await page.coverage.stopCSSCoverage();180 expect(coverage.length).toBe(0);181 });182 describe('resetOnNavigation', function() {183 it('should report stylesheets across navigations', async function({page, server}) {184 await page.coverage.startCSSCoverage({resetOnNavigation: false});185 await page.goto(server.PREFIX + '/csscoverage/multiple.html');186 await page.goto(server.EMPTY_PAGE);187 const coverage = await page.coverage.stopCSSCoverage();188 expect(coverage.length).toBe(2);189 });190 it('should NOT report scripts across navigations', async function({page, server}) {191 await page.coverage.startCSSCoverage(); // Enabled by default.192 await page.goto(server.PREFIX + '/csscoverage/multiple.html');193 await page.goto(server.EMPTY_PAGE);194 const coverage = await page.coverage.stopCSSCoverage();195 expect(coverage.length).toBe(0);196 });197 });198 it('should work with a recently loaded stylesheet', async function({page, server}) {199 await page.coverage.startCSSCoverage();200 await page.evaluate(async url => {201 document.body.textContent = 'hello, world';202 const link = document.createElement('link');203 link.rel = 'stylesheet';204 link.href = url;205 document.head.appendChild(link);206 await new Promise(x => link.onload = x);207 }, server.PREFIX + '/csscoverage/stylesheet1.css');208 const coverage = await page.coverage.stopCSSCoverage();209 expect(coverage.length).toBe(1);210 });211 });...

Full Screen

Full Screen

coverage.js

Source:coverage.js Github

copy

Full Screen

...152 }153)154test.serial('CSSCoverage should work', async t => {155 const { page, server } = t.context156 await page.coverage.startCSSCoverage()157 await page.goto(server.PREFIX + '/csscoverage/simple.html')158 const coverage = await page.coverage.stopCSSCoverage()159 t.is(coverage.length, 1)160 t.true(coverage[0].url.includes('/csscoverage/simple.html'))161 t.deepEqual(coverage[0].ranges, [{ start: 1, end: 22 }])162 const range = coverage[0].ranges[0]163 t.is(164 coverage[0].text.substring(range.start, range.end),165 'div { color: green; }'166 )167})168test.serial('CSSCoverage should report sourceURLs', async t => {169 const { page, server } = t.context170 await page.coverage.startCSSCoverage()171 await page.goto(server.PREFIX + '/csscoverage/sourceurl.html')172 const coverage = await page.coverage.stopCSSCoverage()173 t.is(coverage.length, 1)174 t.is(coverage[0].url, 'nicename.css')175})176test.serial('CSSCoverage should report multiple stylesheets', async t => {177 const { page, server } = t.context178 await page.coverage.startCSSCoverage()179 await page.goto(server.PREFIX + '/csscoverage/multiple.html')180 const coverage = await page.coverage.stopCSSCoverage()181 t.is(coverage.length, 2)182 coverage.sort((a, b) => a.url.localeCompare(b.url))183 t.true(coverage[0].url.includes('/csscoverage/stylesheet1.css'))184 t.true(coverage[1].url.includes('/csscoverage/stylesheet2.css'))185})186test.serial(187 'CSSCoverage should report stylesheets that have no coverage',188 async t => {189 const { page, server } = t.context190 await page.coverage.startCSSCoverage()191 await page.goto(server.PREFIX + '/csscoverage/unused.html')192 const coverage = await page.coverage.stopCSSCoverage()193 t.is(coverage.length, 1)194 t.is(coverage[0].url, 'unused.css')195 t.is(coverage[0].ranges.length, 0)196 }197)198test.serial('CSSCoverage should work with media queries', async t => {199 const { page, server } = t.context200 await page.coverage.startCSSCoverage()201 await page.goto(server.PREFIX + '/csscoverage/media.html')202 const coverage = await page.coverage.stopCSSCoverage()203 t.is(coverage.length, 1)204 t.true(coverage[0].url.includes('/csscoverage/media.html'))205 t.deepEqual(coverage[0].ranges, [{ start: 17, end: 38 }])206})207test.serial('CSSCoverage should work with complicated usecases', async t => {208 const { page, server } = t.context209 await page.coverage.startCSSCoverage()210 await page.goto(server.PREFIX + '/csscoverage/involved.html')211 const coverage = await page.coverage.stopCSSCoverage()212 t.context.toBeGolden(213 t,214 JSON.stringify(coverage, null, 2).replace(/:\d{4}\//g, ':<PORT>/'),215 'csscoverage-involved.txt'216 )217})218test.serial('CSSCoverage should ignore injected stylesheets', async t => {219 const { page, server } = t.context220 await page.coverage.startCSSCoverage()221 await page.addStyleTag({ content: 'body { margin: 10px;}' })222 // trigger style recalc223 const margin = await page.evaluate(224 () => window.getComputedStyle(document.body).margin225 )226 t.is(margin, '10px')227 const coverage = await page.coverage.stopCSSCoverage()228 t.is(coverage.length, 0)229})230test.serial(231 'CSSCoverage - resetOnNavigation: should report stylesheets across navigations',232 async t => {233 const { page, server } = t.context234 await page.coverage.startCSSCoverage({ resetOnNavigation: false })235 await page.goto(server.PREFIX + '/csscoverage/multiple.html')236 await page.goto(server.EMPTY_PAGE)237 const coverage = await page.coverage.stopCSSCoverage()238 t.is(coverage.length, 2)239 }240)241test.serial(242 'CSSCoverage - resetOnNavigation: should NOT report scripts across navigations',243 async t => {244 const { page, server } = t.context245 await page.coverage.startCSSCoverage() // Enabled by default.246 await page.goto(server.PREFIX + '/csscoverage/multiple.html')247 await page.goto(server.EMPTY_PAGE)248 const coverage = await page.coverage.stopCSSCoverage()249 t.is(coverage.length, 0)250 }251)252test.serial(253 'CSSCoverage should work with a recently loaded stylesheet',254 async t => {255 const { page, server } = t.context256 await page.coverage.startCSSCoverage()257 await page.evaluate(async url => {258 document.body.textContent = 'hello, world'259 const link = document.createElement('link')260 link.rel = 'stylesheet'261 link.href = url262 document.head.appendChild(link)263 await new Promise(x => (link.onload = x))264 }, server.PREFIX + '/csscoverage/stylesheet1.css')265 const coverage = await page.coverage.stopCSSCoverage()266 t.is(coverage.length, 1)267 }...

Full Screen

Full Screen

setup.test.js

Source:setup.test.js Github

copy

Full Screen

...8 const page = await browser.newPage()9 // Enable both JavaScript and CSS coverage10 await Promise.all([11 page.coverage.startJSCoverage([false, false]),12 page.coverage.startCSSCoverage()13 ]);14 await page.goto(15 'file:///Users/anirudhsharma/Documents/Semester8_College/STAD/Final%20Project/MonopolyTestFinalProj/monopoly-master1/index.html'16 )17 await page.click('#setup > div:nth-child(10) > input[type=button]')18 const [jsCoverage, cssCoverage] = await Promise.all([19 page.coverage.stopJSCoverage(),20 page.coverage.stopCSSCoverage(),21 ]);22 pti.write([...jsCoverage, ...cssCoverage], { includeHostname: true , storagePath: './.nyc_output' })23 await browser.close()24})25test("test start game click - 4 players", async () => {26 const browser = await puppeteer.launch({27 })28 const page = await browser.newPage()29 // Enable both JavaScript and CSS coverage30 await Promise.all([31 page.coverage.startJSCoverage([false, false]),32 page.coverage.startCSSCoverage()33 ]);34 await page.goto(35 'file:///Users/anirudhsharma/Documents/Semester8_College/STAD/Final%20Project/MonopolyTestFinalProj/monopoly-master1/index.html'36 )37 const [jsCoverage, cssCoverage] = await Promise.all([38 page.coverage.stopJSCoverage(),39 page.coverage.stopCSSCoverage(),40 ]);41 pti.write([...jsCoverage, ...cssCoverage], { includeHostname: true , storagePath: './.nyc_output' })42 await browser.close()...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const puppeteer = require('puppeteer');2(async () => {3 const browser = await puppeteer.launch();4 const page = await browser.newPage();5 await page.coverage.startCSSCoverage();6 const cssCoverage = await page.coverage.stopCSSCoverage();7 console.log(cssCoverage);8 await browser.close();9})();10const puppeteer = require('puppeteer');11(async () => {12 const browser = await puppeteer.launch();13 const page = await browser.newPage();14 await page.coverage.startJSCoverage();15 const jsCoverage = await page.coverage.stopJSCoverage();16 console.log(jsCoverage);17 await browser.close();18})();19const puppeteer = require('puppeteer');20(async () => {21 const browser = await puppeteer.launch();22 const page = await browser.newPage();23 await page.coverage.startJSCoverage();24 const jsCoverage = await page.coverage.stopJSCoverage();25 console.log(jsCoverage);26 await browser.close();27})();28const puppeteer = require('puppeteer');29(async () => {30 const browser = await puppeteer.launch();31 const page = await browser.newPage();32 await page.coverage.startJSCoverage();33 const jsCoverage = await page.coverage.stopJSCoverage();34 console.log(jsCoverage);35 await browser.close();36})();37const puppeteer = require('puppeteer');38(async () => {39 const browser = await puppeteer.launch();40 const page = await browser.newPage();41 await page.coverage.startJSCoverage();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const puppeteer = require('puppeteer');2(async () => {3 const browser = await puppeteer.launch();4 const page = await browser.newPage();5 await page.coverage.startCSSCoverage();6 await page.reload();7 const coverage = await page.coverage.stopCSSCoverage();8 console.log(coverage);9 await browser.close();10})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const puppeteer = require('puppeteer');2(async () => {3 const browser = await puppeteer.launch();4 const page = await browser.newPage();5 await page.startCSSCoverage();6 const coverage = await page.stopCSSCoverage();7 console.log(coverage);8 await browser.close();9})();10const puppeteer = require('puppeteer');11(async () => {12 const browser = await puppeteer.launch();13 const page = await browser.newPage();14 await page.startJSCoverage();15 const coverage = await page.stopJSCoverage();16 console.log(coverage);17 await browser.close();18})();19const puppeteer = require('puppeteer');20(async () => {21 const browser = await puppeteer.launch();22 const page = await browser.newPage();23 await page.startJSCoverage();24 const coverage = await page.stopJSCoverage();25 console.log(coverage);26 await browser.close();27})();28const puppeteer = require('puppeteer');29(async () => {30 const browser = await puppeteer.launch();31 const page = await browser.newPage();32 await page.startJSCoverage();33 const coverage = await page.stopJSCoverage();34 console.log(coverage);35 await browser.close();36})();37const puppeteer = require('puppeteer');38(async () => {39 const browser = await puppeteer.launch();40 const page = await browser.newPage();41 await page.startJSCoverage();42 const coverage = await page.stopJSCoverage();43 console.log(coverage);44 await browser.close();45})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const puppeteer = require('puppeteer');2(async () => {3 const browser = await puppeteer.launch();4 const page = await browser.newPage();5 await page.startCSSCoverage();6 const coverage = await page.stopCSSCoverage();7 console.log(coverage);8 await browser.close();9})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const puppeteer = require('puppeteer');2(async () => {3 const browser = await puppeteer.launch();4 const page = await browser.newPage();5 await page.startCSSCoverage();6 const coverage = await page.stopCSSCoverage();7 console.log(coverage);8 await browser.close();9})();10const puppeteer = require('puppeteer');11(async () => {12 const browser = await puppeteer.launch();13 const page = await browser.newPage();14 await page.startJSCoverage();15 const coverage = await page.stopJSCoverage();16 console.log(coverage);17 await browser.close();18})();19const puppeteer = require('puppeteer');20(async () => {21 const browser = await puppeteer.launch();22 const page = await browser.newPage();23 await page.startJSCoverage();24 const coverage = await page.stopJSCoverage();25 console.log(coverage);26 await browser.close();27})();28const puppeteer = require('puppeteer');29(async () => {30 const browser = await puppeteer.launch();31 const page = await browser.newPage();32 await page.startJSCoverage();33 const coverage = await page.stopJSCoverage();34 console.log(coverage);35 await browser.close();36})();37const puppeteer = require('puppeteer');38(async () => {39 const browser = await puppeteer.launch();40 const page = await browser.newPage();41 await page.startJSCoverage();42 const coverage = await page.stopJSCoverage();43 console.log(coverage);44 await browser.close();45})();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const puppeteer = require('puppeteer');2(async () => {3const browser = await puppeteer.launch();4const page = await browser.newPage();5await page.startCSSCoverage();6const cssCoverage = await page.stopCSSCoverage();7console.log(cssCoverage);8await browser.close();9})();10 text: '.a4bIc{backgroun

Full Screen

Full Screen

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:

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.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful