thunderstrike/puppeteer
thunderstrike/puppeteer
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore(test): simplify element screenshot tests (#2093)

Browse Source
This commit is contained in:
JoelEinbinder 2018-02-23 15:54:26 -08:00 committed by Andrey Lushnikov
parent 56a475f86b
commit e2b96df4d7
3 changed files with 4 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
test/golden/screenshot-element-larger-than-viewport.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
test/golden/screenshot-element-with-scroll-container.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

88
test/test.js
View File

@ -2125,105 +2125,25 @@ describe('Page', function() {
expect(screenshot).toBeGolden('screenshot-element-padding-border.png'); expect(screenshot).toBeGolden('screenshot-element-padding-border.png');
}); });
it('should capture full element when larger than viewport', async({page, server}) => { it('should capture full element when larger than viewport', async({page, server}) => {
// compare with .to-screenshot size
await page.setViewport({width: 500, height: 500}); await page.setViewport({width: 500, height: 500});
await page.setContent(` await page.setContent(`
something above something above
<style>div.spacer { <style>
border: 2px solid red;
background: red;
height: 600px;
width: 52px;
}
div.to-screenshot { div.to-screenshot {
border: 2px solid blue; border: 1px solid blue;
background: rgba(0, 0, 0, 0.5);
width: 600px; width: 600px;
height: 200.5px; height: 600px;
margin-left: 50px; margin-left: 50px;
transform: scaleY(1.2);
}
::-webkit-scrollbar {
display: none;
} }
</style> </style>
<div class="spacer"></div>
<div class="to-screenshot"></div> <div class="to-screenshot"></div>
<div class="spacer"></div>
`); `);
await page.evaluate(function() {
window.scrollTo(11, 12);
});
const elementHandle = await page.$('div.to-screenshot'); const elementHandle = await page.$('div.to-screenshot');
const screenshot = await elementHandle.screenshot(); const screenshot = await elementHandle.screenshot();
expect(screenshot).toBeGolden('screenshot-element-larger-than-viewport.png'); expect(screenshot).toBeGolden('screenshot-element-larger-than-viewport.png');
expect(await page.evaluate(function() { expect(await page.evaluate(() => ({ w: window.innerWidth, h: window.innerHeight }))).toEqual({ w: 500, h: 500 });
return { w: window.innerWidth, h: window.innerHeight };
})).toEqual({ w: 500, h: 500 });
});
it('should screenshot element with scroll container', async({page, server}) => {
// compare with .to-screenshot size
await page.setViewport({width: 500, height: 500});
await page.setContent(`
something above
<style>div.spacer {
border: 2px solid red;
background: red;
height: 600px;
width: 52px;
}
div.container1 {
width: 600px;
height: 600px;
overflow: auto;
}
div.container2 {
width: 620px;
height: 620px;
overflow: auto;
}
div.to-screenshot {
border: 2px solid blue;
background: rgba(0, 0, 0, 0.5);
width: 580px;
height: 580px;
margin-top: 50px;
margin-left: 200px;
margin-right: 50px;
}
::-webkit-scrollbar {
display: none;
}
</style>
<div class="spacer"></div>
<div class="container1">
<div class="container2">
<div class="to-screenshot"></div>
</div>
</div>
<div class="spacer"></div>
`);
await page.evaluate(function() {
window.scrollTo(11, 12);
});
await page.$eval('div.container1', function(element) {
element.scrollTo(100, 0);
});
await page.$eval('div.container2', function(element) {
element.scrollTo(10, 30);
});
const elementHandle = await page.$('div.to-screenshot');
const screenshot = await elementHandle.screenshot();
expect(screenshot).toBeGolden('screenshot-element-with-scroll-container.png');
}); });
it('should scroll element into view', async({page, server}) => { it('should scroll element into view', async({page, server}) => {
await page.setViewport({width: 500, height: 500}); await page.setViewport({width: 500, height: 500});