KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta 
How to use stopCSSCoverage method in Playwright Internal
Best JavaScript code snippet using playwright-internal
coverage.spec.js
Source:coverage.spec.js 
...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 });...
coverage.js
Source:coverage.js
...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 }...
setup.test.js
Source:setup.test.js
...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()...
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.coverage.startCSSCoverage();7 const cssCoverage = await page.coverage.stopCSSCoverage();8 console.log(cssCoverage);9 await browser.close();10})();11#### coverage.startJSCoverage([options])12#### coverage.stopJSCoverage()13#### coverage.startCSSCoverage([options])14#### coverage.stopCSSCoverage()
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.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})();10* **Anshul Gupta** - *Initial work* - [anshulrgupta](
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.coverage.startCSSCoverage();7 const cssCoverage = await page.coverage.stopCSSCoverage();8 console.log(cssCoverage);9 await browser.close();10})();
Using AI Code Generation
1const playwright = require('playwright');2(async () => {3 const browser = await playwright.chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.coverage.startCSSCoverage();7 const coverage = await page.coverage.stopCSSCoverage();8 console.log(coverage);9 await browser.close();10})();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 const [cssCoverage] = await Promise.all([7 page.coverage.startCSSCoverage(),8 ]);9 const coverage = await cssCoverage.stopCSSCoverage();10 console.log(coverage);11 await browser.close();12})();13const { chromium } = require('playwright');14(async () => {15 const browser = await chromium.launch();16 const context = await browser.newContext();17 const page = await context.newPage();18 await browser.close();19})();20const { chromium } = require('playwright');21(async () => {22 const browser = await chromium.launch({ headless: false });23 const context = await browser.newContext();24 const page = await context.newPage();25 await browser.close();26})();27const { chromium } = require('playwright');28(async () => {29 const browser = await chromium.launch({ headless: false, defaultViewport: { width: 1280, height: 720 } });30 const context = await browser.newContext();31 const page = await context.newPage();32 await browser.close();33})();34const { chromium } = require('playwright');35(async () => {36 const browser = await chromium.launch({ headless: false, defaultViewport: { width: 1280, height: 720 } });37 const context1 = await browser.newContext();38 const page1 = await context1.newPage();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.coverage.startCSSCoverage();7 const coverage = await page.coverage.stopCSSCoverage();8 console.log(coverage);9 await browser.close();10})();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.coverage.startCSSCoverage();7 const cssCoverage = await page.coverage.stopCSSCoverage();8 console.log(cssCoverage);9 await browser.close();10})();
Using AI Code Generation
1const { chromium } = require('playwright');2const fs = require('fs');3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const client = await page.context().newCDPSession(page);8 await client.send('CSS.startRuleUsageTracking');9 const result = await client.send('CSS.stopRuleUsageTracking');10 fs.writeFile('cssCoverage.json', JSON.stringify(result), (error) => {11 if (error) {12 console.log(error);13 }14 });15 await browser.close();16})();17{18 {19 },20 {21 },22 {23 },24 {25 },26 {27 },28 {29 },30 {31 },32 {33 },34 {35 },36 {
Using AI Code Generation
1const playwright = require('playwright');2const { chromium } = playwright;3(async () => {4 const browser = await chromium.launch();5 const context = await browser.newContext();6 const page = await context.newPage();7 const [cssCoverage] = await Promise.all([8 page.coverage.startCSSCoverage(),9 page.click('input[name="btnK"]'),10 ]);11 const coverage = await cssCoverage.stopCSSCoverage();12 console.log(coverage);13 await browser.close();14})();15const playwright = require('playwright');16const { chromium } = playwright;17(async () => {18 const browser = await chromium.launch();19 const context = await browser.newContext();20 const page = await context.newPage();21 const [jsCoverage] = await Promise.all([22 page.coverage.startJSCoverage(),23 page.click('input[name="btnK"]'),24 ]);25 const coverage = await jsCoverage.stopJSCoverage();26 console.log(coverage);27 await browser.close();28})();29const playwright = require('playwright');30const { chromium } = playwright;31(async () => {32 const browser = await chromium.launch();33 const context = await browser.newContext();34 const page = await context.newPage();35 const [jsCoverage] = await Promise.all([36 page.coverage.startJSCoverage(),37 page.click('input[name="btnK"]'),38 ]);39 const coverage = await jsCoverage.stopJSCoverage();40 console.log(coverage);41 await browser.close();42})();43const playwright = require('playwright');44const { chromium } = playwright;45(async () => {46 const browser = await chromium.launch();47 const context = await browser.newContext();48 const page = await context.newPage();
Using AI Code Generation
1const coverage = await page.stopCSSCoverage();2console.log(coverage);3### `page.stopJSCoverage()`4const coverage = await page.stopJSCoverage();5console.log(coverage);6### `page.stopTracing()`7const trace = await page.stopTracing();8console.log(trace);9const trace = page.tracing;10console.log(trace);11### `page.waitForFileChooser()`12const fileChooser = await page.waitForFileChooser();13console.log(fileChooser);14### `page.waitForFunction(pageFunction[, options[, ...args]])`
Playwright tutorial
LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.
Chapters:
- What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
- How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
- Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
- What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
- Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
- Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
- Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
- Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
- Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
- Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
- Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
- Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.
Run Playwright Internal 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?
