How to use expectContexts method in Playwright Internal

Best JavaScript code snippet using playwright-internal

Run Playwright Internal automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

index.test.js

Source: index.test.js Github

copy
1const { JSDOM } = require("jsdom");
2
3const findStackingContexts = require("./");
4
5describe("findStackingContexts", () => {
6  it("returns the html node last", () => {
7    const dom = new JSDOM('<html><body><div id="test-el"></div></body></html>');
8    const testEl = dom.window.document.getElementById("test-el");
9
10    const contexts = findStackingContexts(testEl, dom.window);
11
12    expect(contexts).toBeInstanceOf(Array);
13    expect(contexts).toHaveLength(1);
14    expect(contexts[0].nodeName).toBe("HTML");
15  });
16
17  describe("developer experience", () => {
18    afterEach(() => {
19      delete global.window;
20    });
21    it("uses the global window object if one is not supplied", () => {
22      const dom = new JSDOM(
23        '<html><body><div id="test-el"></div></body></html>'
24      );
25      const testEl = dom.window.document.getElementById("test-el");
26
27      global.window = dom.window;
28      const contexts = findStackingContexts(testEl);
29
30      // It returned successfully.
31      expect(contexts).toHaveLength(1);
32    });
33  });
34
35  describe("matching elements", () => {
36    // Test cases taken from MDN
37    // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#The_stacking_context
38    it("Root element of the document (<html>)", () => {
39      const dom = new JSDOM(
40        '<html><body><div id="test-el"></div></body></html>'
41      );
42      const testEl = dom.window.document.getElementById("test-el");
43
44      const contexts = findStackingContexts(testEl, dom.window);
45
46      expect(contexts).toBeInstanceOf(Array);
47      expect(contexts).toHaveLength(1);
48      expect(contexts[0].nodeName).toBe("HTML");
49    });
50    it("Element with a position value absolute or relative and z-index value other than auto.", () => {
51      const absoluteWithNoZIndex = new JSDOM(
52        `<div style="position: absolute;">
53          <div id="test-el"></div>
54        </div>`
55      );
56      const absoluteWithAutoZIndex = new JSDOM(
57        `<div style="position: absolute; z-index: auto;">
58          <div id="test-el"></div>
59        </div>`
60      );
61      const absoluteWithZIndex = new JSDOM(
62        `<div id="target" style="position: absolute; z-index: 1;">
63          <div id="test-el"></div>
64        </div>`
65      );
66      const relativeWithNoZIndex = new JSDOM(
67        `<div style="position: relative;">
68          <div id="test-el"></div>
69        </div>`
70      );
71      const relativeWithAutoZIndex = new JSDOM(
72        `<div style="position: relative; z-index: auto;">
73          <div id="test-el"></div>
74        </div>`
75      );
76      const relativeWithZIndex = new JSDOM(
77        `<div id="target" style="position: relative; z-index: 1;">
78          <div id="test-el"></div>
79        </div>`
80      );
81
82      const expectNoContext = [
83        absoluteWithNoZIndex,
84        absoluteWithAutoZIndex,
85        relativeWithNoZIndex,
86        relativeWithAutoZIndex,
87      ];
88
89      const expectContext = [absoluteWithZIndex, relativeWithZIndex];
90
91      expectNoContext.forEach((dom) => {
92        const testEl = dom.window.document.getElementById("test-el");
93        const contexts = findStackingContexts(testEl, dom.window);
94
95        expect(contexts).toHaveLength(1);
96      });
97
98      expectContext.forEach((dom) => {
99        const testEl = dom.window.document.getElementById("test-el");
100        const contexts = findStackingContexts(testEl, dom.window);
101
102        expect(contexts).toHaveLength(2);
103        expect(contexts[0]).toHaveProperty("id", "target");
104      });
105    });
106
107    it("Element with a position value fixed or sticky (sticky for all mobile browsers, but not older desktop).", () => {
108      const fixed = new JSDOM(
109        `<div id="target" style="position: fixed;">
110          <div id="test-el"></div>
111        </div>`
112      );
113      const sticky = new JSDOM(
114        `<div id="target" style="position: sticky;">
115          <div id="test-el"></div>
116        </div>`
117      );
118
119      const expectContext = [fixed, sticky];
120
121      expectContext.forEach((dom) => {
122        const testEl = dom.window.document.getElementById("test-el");
123        const contexts = findStackingContexts(testEl, dom.window);
124
125        expect(contexts).toHaveLength(2);
126        expect(contexts[0]).toHaveProperty("id", "target");
127      });
128    });
129
130    it("Element that is a child of a flex (flexbox) container, with z-index value other than auto.", () => {
131      const childOfFlexWithNoZIndex = new JSDOM(`
132        <div style="display: flex;">
133          <div>
134            <div id="test-el"></div>
135          </div>
136        </div>
137      `);
138      const childOfFlexWithAutoZIndex = new JSDOM(`
139        <div style="display: flex;">
140          <div style="z-index: auto;">
141            <div id="test-el"></div>
142          </div>
143        </div>
144      `);
145      const childOfFlexWithZIndex = new JSDOM(`
146        <div style="display: flex;">
147          <div id="target" style="z-index: 1;">
148            <div id="test-el"></div>
149          </div>
150        </div>
151      `);
152
153      const expectNoContexts = [
154        childOfFlexWithNoZIndex,
155        childOfFlexWithAutoZIndex,
156      ];
157
158      const expectContexts = [childOfFlexWithZIndex];
159
160      expectNoContexts.forEach((dom) => {
161        const testEl = dom.window.document.getElementById("test-el");
162        const contexts = findStackingContexts(testEl, dom.window);
163
164        expect(contexts).toHaveLength(1);
165      });
166
167      expectContexts.forEach((dom) => {
168        const testEl = dom.window.document.getElementById("test-el");
169        const contexts = findStackingContexts(testEl, dom.window);
170
171        expect(contexts).toHaveLength(2);
172        expect(contexts[0]).toHaveProperty("id", "target");
173      });
174    });
175
176    it("Element that is a child of a grid (grid) container, with z-index value other than auto.", () => {
177      const childOfGridWithNoZIndex = new JSDOM(`
178        <div style="display: grid;">
179          <div>
180            <div id="test-el"></div>
181          </div>
182        </div>
183      `);
184      const childOfGridWithAutoZIndex = new JSDOM(`
185        <div style="display: grid;">
186          <div style="z-index: auto;">
187            <div id="test-el"></div>
188          </div>
189        </div>
190      `);
191      const childOfGridWithZIndex = new JSDOM(`
192        <div style="display: grid;">
193          <div id="target" style="z-index: 1;">
194            <div id="test-el"></div>
195          </div>
196        </div>
197      `);
198
199      const expectNoContexts = [
200        childOfGridWithNoZIndex,
201        childOfGridWithAutoZIndex,
202      ];
203
204      const expectContexts = [childOfGridWithZIndex];
205
206      expectNoContexts.forEach((dom) => {
207        const testEl = dom.window.document.getElementById("test-el");
208        const contexts = findStackingContexts(testEl, dom.window);
209
210        expect(contexts).toHaveLength(1);
211      });
212
213      expectContexts.forEach((dom) => {
214        const testEl = dom.window.document.getElementById("test-el");
215        const contexts = findStackingContexts(testEl, dom.window);
216
217        expect(contexts).toHaveLength(2);
218        expect(contexts[0]).toHaveProperty("id", "target");
219      });
220    });
221
222    it("Element with a opacity value less than 1 (See the specification for opacity).", () => {
223      const opacityOfOne = new JSDOM(`
224        <div style="opacity: 1;">
225          <div id="test-el"></div>
226        </div>
227      `);
228      const opacityOfFiveTenths = new JSDOM(`
229        <div id="target" style="opacity: 0.5;">
230          <div id="test-el"></div>
231        </div>
232      `);
233      const opacityOfZero = new JSDOM(`
234        <div id="target" style="opacity: 0;">
235          <div id="test-el"></div>
236        </div>
237      `);
238
239      const expectNoContexts = [opacityOfOne];
240
241      const expectContexts = [opacityOfFiveTenths, opacityOfZero];
242
243      expectNoContexts.forEach((dom) => {
244        const testEl = dom.window.document.getElementById("test-el");
245        const contexts = findStackingContexts(testEl, dom.window);
246
247        expect(contexts).toHaveLength(1);
248      });
249
250      expectContexts.forEach((dom) => {
251        const testEl = dom.window.document.getElementById("test-el");
252        const contexts = findStackingContexts(testEl, dom.window);
253
254        expect(contexts).toHaveLength(2);
255        expect(contexts[0]).toHaveProperty("id", "target");
256      });
257    });
258
259    it("Element with a mix-blend-mode value other than normal.", () => {
260      const mixBlendModeNormal = new JSDOM(`
261        <div style="mix-blend-mode: normal;">
262          <div id="test-el"></div>
263        </div>
264      `);
265      const mixBlendModeMultiply = new JSDOM(`
266        <div id="target" style="mix-blend-mode: multiply;">
267          <div id="test-el"></div>
268        </div>
269      `);
270
271      const expectNoContexts = [mixBlendModeNormal];
272
273      const expectContexts = [mixBlendModeMultiply];
274
275      expectNoContexts.forEach((dom) => {
276        const testEl = dom.window.document.getElementById("test-el");
277        const contexts = findStackingContexts(testEl, dom.window);
278
279        expect(contexts).toHaveLength(1);
280      });
281
282      expectContexts.forEach((dom) => {
283        const testEl = dom.window.document.getElementById("test-el");
284        const contexts = findStackingContexts(testEl, dom.window);
285
286        expect(contexts).toHaveLength(2);
287        expect(contexts[0]).toHaveProperty("id", "target");
288      });
289    });
290
291    describe("Element with any of the following properties with value other than `none`:", () => {
292      const properties = [
293        "transform",
294        "filter",
295        // NOTE: `perspective` does not seem to be supported by the JSDOM CSSOM
296        // "perspective",
297        "clip-path",
298        "mask",
299        "mask-image",
300        "mask-border",
301      ];
302      properties.forEach((property) => {
303        // Disabling because `property` is promised to be a string
304        // eslint-disable-next-line jest/valid-title
305        it(property, () => {
306          const propertyWithNone = new JSDOM(`
307            <div style="${property}: none;">
308              <div id="test-el"></div>
309            </div>
310          `);
311          const propertyWithRandomValue = new JSDOM(`
312            <div id="target" style="${property}: random-value;">
313              <div id="test-el"></div>
314            </div>
315          `);
316
317          const expectNoContexts = [propertyWithNone];
318
319          const expectContexts = [propertyWithRandomValue];
320
321          expectNoContexts.forEach((dom) => {
322            const testEl = dom.window.document.getElementById("test-el");
323            const contexts = findStackingContexts(testEl, dom.window);
324
325            expect(contexts).toHaveLength(1);
326          });
327
328          expectContexts.forEach((dom) => {
329            const testEl = dom.window.document.getElementById("test-el");
330            const contexts = findStackingContexts(testEl, dom.window);
331
332            expect(contexts).toHaveLength(2);
333            expect(contexts[0]).toHaveProperty("id", "target");
334          });
335        });
336      });
337    });
338
339    it("Element with a `isolation` value `isolate`.", () => {
340      const isolationInitial = new JSDOM(`
341        <div style="isolation: initial;">
342          <div id="test-el"></div>
343        </div>
344      `);
345      const isolationIsolate = new JSDOM(`
346        <div id="target" style="isolation: isolate;">
347          <div id="test-el"></div>
348        </div>
349      `);
350
351      const expectNoContexts = [isolationInitial];
352
353      const expectContexts = [isolationIsolate];
354
355      expectNoContexts.forEach((dom) => {
356        const testEl = dom.window.document.getElementById("test-el");
357        const contexts = findStackingContexts(testEl, dom.window);
358
359        expect(contexts).toHaveLength(1);
360      });
361
362      expectContexts.forEach((dom) => {
363        const testEl = dom.window.document.getElementById("test-el");
364        const contexts = findStackingContexts(testEl, dom.window);
365
366        expect(contexts).toHaveLength(2);
367        expect(contexts[0]).toHaveProperty("id", "target");
368      });
369    });
370
371    // Skipped because JSDOM CSSOM does support the vendor prefixed value.
372    // eslint-disable-next-line jest/no-disabled-tests
373    it.skip("Element with a `-webkit-overflow-scrolling` value `touch`.", () => {
374      const webkitOverflowScrollingInitial = new JSDOM(`
375        <div style="-webkit-overflow-scrolling: initial;">
376          <div id="test-el"></div>
377        </div>
378      `);
379      const WebkitOverflowScrollingTouch = new JSDOM(`
380        <div id="target" style="-webkit-overflow-scrolling: touch;">
381          <div id="test-el"></div>
382        </div>
383      `);
384
385      const expectNoContexts = [webkitOverflowScrollingInitial];
386
387      const expectContexts = [WebkitOverflowScrollingTouch];
388
389      expectNoContexts.forEach((dom) => {
390        const testEl = dom.window.document.getElementById("test-el");
391        const contexts = findStackingContexts(testEl, dom.window);
392
393        expect(contexts).toHaveLength(1);
394      });
395
396      expectContexts.forEach((dom) => {
397        const testEl = dom.window.document.getElementById("test-el");
398        const contexts = findStackingContexts(testEl, dom.window);
399
400        expect(contexts).toHaveLength(2);
401        expect(contexts[0]).toHaveProperty("id", "target");
402      });
403    });
404
405    it("Element with a will-change value specifying any property that would create a stacking context on non-initial value", () => {
406      const nonStackingValue = new JSDOM(`
407          <div style="will-change: display">
408            <div id="test-el"></div>
409          </div>
410        `);
411
412      const stackingValue = new JSDOM(`
413          <div id="target" style="will-change: position">
414            <div id="test-el"></div>
415          </div>
416        `);
417
418      const stackingValueInList = new JSDOM(`
419          <div id="target" style="will-change: font, position;">
420            <div id="test-el"></div>
421          </div>
422        `);
423
424      const expectNoContexts = [nonStackingValue];
425      const expectContexts = [stackingValue, stackingValueInList];
426
427      expectNoContexts.forEach((dom) => {
428        const testEl = dom.window.document.getElementById("test-el");
429        const contexts = findStackingContexts(testEl, dom.window);
430
431        expect(contexts).toHaveLength(1);
432      });
433
434      expectContexts.forEach((dom) => {
435        const testEl = dom.window.document.getElementById("test-el");
436        const contexts = findStackingContexts(testEl, dom.window);
437
438        expect(contexts).toHaveLength(2);
439        expect(contexts[0]).toHaveProperty("id", "target");
440      });
441    });
442
443    it("Element with a contain value of layout, or paint, or a composite value that includes either of them.", () => {
444      const noContainValue = new JSDOM(`
445        <div style="contain: size">
446          <div id="test-el"></div>
447        </div>
448      `);
449
450      const containLayout = new JSDOM(`
451        <div id="target" style="contain: layout;">
452          <div id="test-el"></div>
453        </div>
454      `);
455
456      const containPaint = new JSDOM(`
457        <div id="target" style="contain: paint;">
458          <div id="test-el"></div>
459        </div>
460      `);
461
462      const containSizeLayoutPaint = new JSDOM(`
463        <div id="target" style="contain: size layout paint;">
464          <div id="test-el"></div>
465        </div>
466      `);
467
468      const containStrict = new JSDOM(`
469        <div id="target" style="contain: strict;">
470          <div id="test-el"></div>
471        </div>
472      `);
473
474      const containContent = new JSDOM(`
475        <div id="target" style="contain: content;">
476          <div id="test-el"></div>
477        </div>
478      `);
479
480      const expectNoContexts = [noContainValue];
481      const expectContexts = [
482        containLayout,
483        containPaint,
484        containSizeLayoutPaint,
485        containStrict,
486        containContent,
487      ];
488
489      expectNoContexts.forEach((dom) => {
490        const testEl = dom.window.document.getElementById("test-el");
491        const contexts = findStackingContexts(testEl, dom.window);
492
493        expect(contexts).toHaveLength(1);
494      });
495
496      expectContexts.forEach((dom) => {
497        const testEl = dom.window.document.getElementById("test-el");
498        const contexts = findStackingContexts(testEl, dom.window);
499
500        expect(contexts).toHaveLength(2);
501        expect(contexts[0]).toHaveProperty("id", "target");
502      });
503    });
504  });
505
506  it("properly skips over invalid contexts", () => {
507    const noValidPosition = new JSDOM(`
508      <div id="target" style="z-index: 1;">
509        <div id="test-el"></div>
510      </div>
511    `);
512
513    const expectNoContexts = [noValidPosition];
514
515    expectNoContexts.forEach((dom) => {
516      const testEl = dom.window.document.getElementById("test-el");
517      const contexts = findStackingContexts(testEl, dom.window);
518
519      expect(contexts).toHaveLength(1);
520    });
521  });
522});
523
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Playwright Internal on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)