Skip to content

Commit 573f580

Browse files
pavelfeldmanpavelfeldman
authored
test: remove describes (3) (#3278)
1 parent de55fa6 commit 573f580

23 files changed

+2386
-2137
lines changed

‎test/elementhandle-screenshot.spec.js

Lines changed: 348 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,348 @@
1+
/**
2+
* Copyright 2018 Google Inc. All rights reserved.
3+
* Modifications copyright (c) Microsoft Corporation.
4+
*
5+
* Licensed under the Apache License, Version 2.0 (the "License");
6+
* you may not use this file except in compliance with the License.
7+
* You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
*/
17+
18+
const utils = require('./utils');
19+
const {FFOX, CHROMIUM, WEBKIT, USES_HOOKS, HEADLESS} = testOptions;
20+
const {PNG} = require('pngjs');
21+
22+
// Firefox headful produces a different image.
23+
const ffheadful = FFOX && !HEADLESS;
24+
25+
it.skip(ffheadful)('should work', async({page, server}) => {
26+
await page.setViewportSize({width: 500, height: 500});
27+
await page.goto(server.PREFIX + '/grid.html');
28+
await page.evaluate(() => window.scrollBy(50, 100));
29+
const elementHandle = await page.$('.box:nth-of-type(3)');
30+
const screenshot = await elementHandle.screenshot();
31+
expect(screenshot).toBeGolden('screenshot-element-bounding-box.png');
32+
});
33+
it.skip(ffheadful)('should take into account padding and border', async({page}) => {
34+
await page.setViewportSize({width: 500, height: 500});
35+
await page.setContent(`
36+
<div style="height: 14px">oooo</div>
37+
<style>div {
38+
border: 2px solid blue;
39+
background: green;
40+
width: 50px;
41+
height: 50px;
42+
}
43+
</style>
44+
<div id="d"></div>
45+
`);
46+
const elementHandle = await page.$('div#d');
47+
const screenshot = await elementHandle.screenshot();
48+
expect(screenshot).toBeGolden('screenshot-element-padding-border.png');
49+
});
50+
it.skip(ffheadful)('should capture full element when larger than viewport in parallel', async({page}) => {
51+
await page.setViewportSize({width: 500, height: 500});
52+
53+
await page.setContent(`
54+
<div style="height: 14px">oooo</div>
55+
<style>
56+
div.to-screenshot {
57+
border: 1px solid blue;
58+
width: 600px;
59+
height: 600px;
60+
margin-left: 50px;
61+
}
62+
::-webkit-scrollbar{
63+
display: none;
64+
}
65+
</style>
66+
<div class="to-screenshot"></div>
67+
<div class="to-screenshot"></div>
68+
<div class="to-screenshot"></div>
69+
`);
70+
const elementHandles = await page.$$('div.to-screenshot');
71+
const promises = elementHandles.map(handle => handle.screenshot());
72+
const screenshots = await Promise.all(promises);
73+
expect(screenshots[2]).toBeGolden('screenshot-element-larger-than-viewport.png');
74+
75+
await utils.verifyViewport(page, 500, 500);
76+
});
77+
it.skip(ffheadful)('should capture full element when larger than viewport', async({page}) => {
78+
await page.setViewportSize({width: 500, height: 500});
79+
80+
await page.setContent(`
81+
<div style="height: 14px">oooo</div>
82+
<style>
83+
div.to-screenshot {
84+
border: 1px solid blue;
85+
width: 600px;
86+
height: 600px;
87+
margin-left: 50px;
88+
}
89+
::-webkit-scrollbar{
90+
display: none;
91+
}
92+
</style>
93+
<div class="to-screenshot"></div>
94+
<div class="to-screenshot"></div>
95+
<div class="to-screenshot"></div>
96+
`);
97+
const elementHandle = await page.$('div.to-screenshot');
98+
const screenshot = await elementHandle.screenshot();
99+
expect(screenshot).toBeGolden('screenshot-element-larger-than-viewport.png');
100+
101+
await utils.verifyViewport(page, 500, 500);
102+
});
103+
it.skip(ffheadful)('should scroll element into view', async({page}) => {
104+
await page.setViewportSize({width: 500, height: 500});
105+
await page.setContent(`
106+
<div style="height: 14px">oooo</div>
107+
<style>div.above {
108+
border: 2px solid blue;
109+
background: red;
110+
height: 1500px;
111+
}
112+
div.to-screenshot {
113+
border: 2px solid blue;
114+
background: green;
115+
width: 50px;
116+
height: 50px;
117+
}
118+
</style>
119+
<div class="above"></div>
120+
<div class="to-screenshot"></div>
121+
`);
122+
const elementHandle = await page.$('div.to-screenshot');
123+
const screenshot = await elementHandle.screenshot();
124+
expect(screenshot).toBeGolden('screenshot-element-scrolled-into-view.png');
125+
});
126+
it.skip(ffheadful)('should scroll 15000px into view', async({page}) => {
127+
await page.setViewportSize({width: 500, height: 500});
128+
await page.setContent(`
129+
<div style="height: 14px">oooo</div>
130+
<style>div.above {
131+
border: 2px solid blue;
132+
background: red;
133+
height: 15000px;
134+
}
135+
div.to-screenshot {
136+
border: 2px solid blue;
137+
background: green;
138+
width: 50px;
139+
height: 50px;
140+
}
141+
</style>
142+
<div class="above"></div>
143+
<div class="to-screenshot"></div>
144+
`);
145+
const elementHandle = await page.$('div.to-screenshot');
146+
const screenshot = await elementHandle.screenshot();
147+
expect(screenshot).toBeGolden('screenshot-element-scrolled-into-view.png');
148+
});
149+
it.skip(ffheadful)('should work with a rotated element', async({page}) => {
150+
await page.setViewportSize({width: 500, height: 500});
151+
await page.setContent(`<div style="position:absolute;
152+
top: 100px;
153+
left: 100px;
154+
width: 100px;
155+
height: 100px;
156+
background: green;
157+
transform: rotateZ(200deg);">&nbsp;</div>`);
158+
const elementHandle = await page.$('div');
159+
const screenshot = await elementHandle.screenshot();
160+
expect(screenshot).toBeGolden('screenshot-element-rotate.png');
161+
});
162+
it.skip(ffheadful)('should fail to screenshot a detached element', async({page, server}) => {
163+
await page.setContent('<h1>remove this</h1>');
164+
const elementHandle = await page.$('h1');
165+
await page.evaluate(element => element.remove(), elementHandle);
166+
const screenshotError = await elementHandle.screenshot().catch(error => error);
167+
expect(screenshotError.message).toContain('Element is not attached to the DOM');
168+
});
169+
it.skip(ffheadful)('should timeout waiting for visible', async({page, server}) => {
170+
await page.setContent('<div style="width: 50px; height: 0"></div>');
171+
const div = await page.$('div');
172+
const error = await div.screenshot({ timeout: 3000 }).catch(e => e);
173+
expect(error.message).toContain('elementHandle.screenshot: Timeout 3000ms exceeded');
174+
expect(error.message).toContain('element is not visible');
175+
});
176+
it.skip(ffheadful)('should wait for visible', async({page, server}) => {
177+
await page.setViewportSize({width: 500, height: 500});
178+
await page.goto(server.PREFIX + '/grid.html');
179+
await page.evaluate(() => window.scrollBy(50, 100));
180+
const elementHandle = await page.$('.box:nth-of-type(3)');
181+
await elementHandle.evaluate(e => e.style.visibility = 'hidden');
182+
let done = false;
183+
const promise = elementHandle.screenshot().then(buffer => {
184+
done = true;
185+
return buffer;
186+
});
187+
for (let i = 0; i < 10; i++)
188+
await page.evaluate(() => new Promise(f => requestAnimationFrame(f)));
189+
expect(done).toBe(false);
190+
await elementHandle.evaluate(e => e.style.visibility = 'visible');
191+
const screenshot = await promise;
192+
expect(screenshot).toBeGolden('screenshot-element-bounding-box.png');
193+
});
194+
it.skip(ffheadful)('should work for an element with fractional dimensions', async({page}) => {
195+
await page.setContent('<div style="width:48.51px;height:19.8px;border:1px solid black;"></div>');
196+
const elementHandle = await page.$('div');
197+
const screenshot = await elementHandle.screenshot();
198+
expect(screenshot).toBeGolden('screenshot-element-fractional.png');
199+
});
200+
it.skip(FFOX)('should work with a mobile viewport', async({browser, server}) => {
201+
const context = await browser.newContext({viewport: { width: 320, height: 480, isMobile: true }});
202+
const page = await context.newPage();
203+
await page.goto(server.PREFIX + '/grid.html');
204+
await page.evaluate(() => window.scrollBy(50, 100));
205+
const elementHandle = await page.$('.box:nth-of-type(3)');
206+
const screenshot = await elementHandle.screenshot();
207+
expect(screenshot).toBeGolden('screenshot-element-mobile.png');
208+
await context.close();
209+
});
210+
it.skip(FFOX)('should work with device scale factor', async({browser, server}) => {
211+
const context = await browser.newContext({ viewport: { width: 320, height: 480 }, deviceScaleFactor: 2 });
212+
const page = await context.newPage();
213+
await page.goto(server.PREFIX + '/grid.html');
214+
await page.evaluate(() => window.scrollBy(50, 100));
215+
const elementHandle = await page.$('.box:nth-of-type(3)');
216+
const screenshot = await elementHandle.screenshot();
217+
expect(screenshot).toBeGolden('screenshot-element-mobile-dsf.png');
218+
await context.close();
219+
});
220+
it.skip(ffheadful)('should work for an element with an offset', async({page}) => {
221+
await page.setContent('<div style="position:absolute; top: 10.3px; left: 20.4px;width:50.3px;height:20.2px;border:1px solid black;"></div>');
222+
const elementHandle = await page.$('div');
223+
const screenshot = await elementHandle.screenshot();
224+
expect(screenshot).toBeGolden('screenshot-element-fractional-offset.png');
225+
});
226+
it.skip(ffheadful)('should take screenshots when default viewport is null', async({server, browser}) => {
227+
const context = await browser.newContext({ viewport: null });
228+
const page = await context.newPage();
229+
await page.setContent(`<div style='height: 10000px; background: red'></div>`);
230+
const windowSize = await page.evaluate(() => ({ width: window.innerWidth * window.devicePixelRatio, height: window.innerHeight * window.devicePixelRatio }));
231+
const sizeBefore = await page.evaluate(() => ({ width: document.body.offsetWidth, height: document.body.offsetHeight }));
232+
233+
const screenshot = await page.screenshot();
234+
expect(screenshot).toBeInstanceOf(Buffer);
235+
const decoded = PNG.sync.read(screenshot);
236+
expect(decoded.width).toBe(windowSize.width);
237+
expect(decoded.height).toBe(windowSize.height);
238+
239+
const sizeAfter = await page.evaluate(() => ({ width: document.body.offsetWidth, height: document.body.offsetHeight }));
240+
expect(sizeBefore.width).toBe(sizeAfter.width);
241+
expect(sizeBefore.height).toBe(sizeAfter.height);
242+
await context.close();
243+
});
244+
it.skip(ffheadful)('should take fullPage screenshots when default viewport is null', async({server, browser}) => {
245+
const context = await browser.newContext({ viewport: null });
246+
const page = await context.newPage();
247+
await page.goto(server.PREFIX + '/grid.html');
248+
const sizeBefore = await page.evaluate(() => ({ width: document.body.offsetWidth, height: document.body.offsetHeight }));
249+
const screenshot = await page.screenshot({
250+
fullPage: true
251+
});
252+
expect(screenshot).toBeInstanceOf(Buffer);
253+
254+
const sizeAfter = await page.evaluate(() => ({ width: document.body.offsetWidth, height: document.body.offsetHeight }));
255+
expect(sizeBefore.width).toBe(sizeAfter.width);
256+
expect(sizeBefore.height).toBe(sizeAfter.height);
257+
await context.close();
258+
});
259+
it.skip(ffheadful)('should restore default viewport after fullPage screenshot', async({ browser }) => {
260+
const context = await browser.newContext({ viewport: { width: 456, height: 789 } });
261+
const page = await context.newPage();
262+
await utils.verifyViewport(page, 456, 789);
263+
const screenshot = await page.screenshot({ fullPage: true });
264+
expect(screenshot).toBeInstanceOf(Buffer);
265+
await utils.verifyViewport(page, 456, 789);
266+
await context.close();
267+
});
268+
it.skip(ffheadful || USES_HOOKS)('should restore viewport after page screenshot and exception', async({ browser, server }) => {
269+
const context = await browser.newContext({ viewport: { width: 350, height: 360 } });
270+
const page = await context.newPage();
271+
await page.goto(server.PREFIX + '/grid.html');
272+
const __testHookBeforeScreenshot = () => { throw new Error('oh my') };
273+
const error = await page.screenshot({ fullPage: true, __testHookBeforeScreenshot }).catch(e => e);
274+
expect(error.message).toContain('oh my');
275+
await utils.verifyViewport(page, 350, 360);
276+
await context.close();
277+
});
278+
it.skip(ffheadful || USES_HOOKS)('should restore viewport after page screenshot and timeout', async({ browser, server }) => {
279+
const context = await browser.newContext({ viewport: { width: 350, height: 360 } });
280+
const page = await context.newPage();
281+
await page.goto(server.PREFIX + '/grid.html');
282+
const __testHookAfterScreenshot = () => new Promise(f => setTimeout(f, 5000));
283+
const error = await page.screenshot({ fullPage: true, __testHookAfterScreenshot, timeout: 3000 }).catch(e => e);
284+
expect(error.message).toContain('page.screenshot: Timeout 3000ms exceeded');
285+
await utils.verifyViewport(page, 350, 360);
286+
await page.setViewportSize({ width: 400, height: 400 });
287+
await page.waitForTimeout(3000); // Give it some time to wrongly restore previous viewport.
288+
await utils.verifyViewport(page, 400, 400);
289+
await context.close();
290+
});
291+
it.skip(ffheadful)('should take element screenshot when default viewport is null and restore back', async({server, browser}) => {
292+
const context = await browser.newContext({viewport: null});
293+
const page = await context.newPage({ viewport: null });
294+
await page.setContent(`
295+
<div style="height: 14px">oooo</div>
296+
<style>
297+
div.to-screenshot {
298+
border: 1px solid blue;
299+
width: 600px;
300+
height: 600px;
301+
margin-left: 50px;
302+
}
303+
::-webkit-scrollbar{
304+
display: none;
305+
}
306+
</style>
307+
<div class="to-screenshot"></div>
308+
<div class="to-screenshot"></div>
309+
<div class="to-screenshot"></div>
310+
`);
311+
const sizeBefore = await page.evaluate(() => ({ width: document.body.offsetWidth, height: document.body.offsetHeight }));
312+
const elementHandle = await page.$('div.to-screenshot');
313+
const screenshot = await elementHandle.screenshot();
314+
expect(screenshot).toBeInstanceOf(Buffer);
315+
const sizeAfter = await page.evaluate(() => ({ width: document.body.offsetWidth, height: document.body.offsetHeight }));
316+
expect(sizeBefore.width).toBe(sizeAfter.width);
317+
expect(sizeBefore.height).toBe(sizeAfter.height);
318+
await context.close();
319+
});
320+
it.skip(ffheadful || USES_HOOKS)('should restore viewport after element screenshot and exception', async({server, browser}) => {
321+
const context = await browser.newContext({ viewport: { width: 350, height: 360 } });
322+
const page = await context.newPage();
323+
await page.setContent(`<div style="width:600px;height:600px;"></div>`);
324+
const elementHandle = await page.$('div');
325+
const __testHookBeforeScreenshot = () => { throw new Error('oh my') };
326+
const error = await elementHandle.screenshot({ __testHookBeforeScreenshot }).catch(e => e);
327+
expect(error.message).toContain('oh my');
328+
await utils.verifyViewport(page, 350, 360);
329+
await context.close();
330+
});
331+
it.skip(ffheadful)('should wait for element to stop moving', async({page, server}) => {
332+
await page.setViewportSize({ width: 500, height: 500 });
333+
await page.goto(server.PREFIX + '/grid.html');
334+
const elementHandle = await page.$('.box:nth-of-type(3)');
335+
await elementHandle.evaluate(e => {
336+
e.classList.add('animation');
337+
return new Promise(f => requestAnimationFrame(() => requestAnimationFrame(f)));
338+
});
339+
const screenshot = await elementHandle.screenshot();
340+
expect(screenshot).toBeGolden('screenshot-element-bounding-box.png');
341+
});
342+
it.skip(ffheadful)('should take screenshot of disabled button', async({page}) => {
343+
await page.setViewportSize({ width: 500, height: 500 });
344+
await page.setContent(`<button disabled>Click me</button>`);
345+
const button = await page.$('button');
346+
const screenshot = await button.screenshot();
347+
expect(screenshot).toBeInstanceOf(Buffer);
348+
});

‎test/jshandle-as-element.spec.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/**
2+
* Copyright 2018 Google Inc. All rights reserved.
3+
* Modifications copyright (c) Microsoft Corporation.
4+
*
5+
* Licensed under the Apache License, Version 2.0 (the "License");
6+
* you may not use this file except in compliance with the License.
7+
* You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
*/
17+
18+
const {FFOX, CHROMIUM, WEBKIT} = testOptions;
19+
20+
it('should work', async({page, server}) => {
21+
const aHandle = await page.evaluateHandle(() => document.body);
22+
const element = aHandle.asElement();
23+
expect(element).toBeTruthy();
24+
});
25+
26+
it('should return null for non-elements', async({page, server}) => {
27+
const aHandle = await page.evaluateHandle(() => 2);
28+
const element = aHandle.asElement();
29+
expect(element).toBeFalsy();
30+
});
31+
32+
it('should return ElementHandle for TextNodes', async({page, server}) => {
33+
await page.setContent('<div>ee!</div>');
34+
const aHandle = await page.evaluateHandle(() => document.querySelector('div').firstChild);
35+
const element = aHandle.asElement();
36+
expect(element).toBeTruthy();
37+
expect(await page.evaluate(e => e.nodeType === HTMLElement.TEXT_NODE, element)).toBeTruthy();
38+
});
39+
40+
it('should work with nullified Node', async({page, server}) => {
41+
await page.setContent('<section>test</section>');
42+
await page.evaluate('delete Node');
43+
const handle = await page.evaluateHandle(() => document.querySelector('section'));
44+
const element = handle.asElement();
45+
expect(element).not.toBe(null);
46+
});

0 commit comments

Comments
 (0)