Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Do not complain when endY is bigger than document height #54

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Fix: Do not complain when endY is bigger than document height #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f0ab497
fix: do not complain when endY is bigger than document height
mehdivk Jan 10, 2017
4d06626
integration tests for partially visible element
mehdivk Jan 11, 2017
d83e619
reference images for partially visible element
mehdivk Jan 11, 2017
7d66a65
added reference images for IE
mehdivk Jan 11, 2017
4740c31
updated endY issue example
mehdivk Jan 13, 2017
09d8b02
temp tweak for scrolling element instead of html
mehdivk Jan 13, 2017
2f81869
configure scroll target via options, default to html
mehdivk Jan 16, 2017
385e17b
change scroll target to be different from element under the test
mehdivk Jan 16, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/modules/makeAreaScreenshot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import ScreenDimension from '../utils/ScreenDimension';
const log = debug('wdio-screenshot:makeAreaScreenshot');
const tmpDir = path.join(__dirname, '..', '..', '.tmp');

export default async function makeAreaScreenshot(browser, startX, startY, endX, endY) {
export default async function makeAreaScreenshot(browser, startX, startY, endX, endY, options) {
log('requested a screenshot for the following area: %j', {startX, startY, endX, endY});

const screenDimensions = (await browser.execute(getScreenDimensions)).value;
Expand All @@ -41,7 +41,7 @@ export default async function makeAreaScreenshot(browser, startX, startY, endX,
const { x, y, indexX, indexY } = screenshotStrategy.getScrollPosition();
log('scroll to coordinates x: %s, y: %s for index x: %s, y: %s', x, y, indexX, indexY);

await browser.execute(virtualScroll, x, y, false);
await browser.execute(virtualScroll, x, y, false, options);
await browser.pause(100);

const filePath = path.join(dir, `${indexY}-${indexX}.png`);
Expand Down Expand Up @@ -69,7 +69,7 @@ export default async function makeAreaScreenshot(browser, startX, startY, endX,
await browser.execute(pageHeight, '');

log('revert scroll to x: %s, y: %s', 0, 0);
await browser.execute(virtualScroll, 0, 0, true);
await browser.execute(virtualScroll, 0, 0, true, options);

const mergedBase64Screenshot = await mergeImages(cropImages);

Expand Down
2 changes: 1 addition & 1 deletion src/modules/makeElementScreenshot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default async function makeElementScreenshot(browser, elementSelector, op
const boundingRect = groupBoundingRect(boundingRects);

// make screenshot of area
const base64Image = await makeAreaScreenshot(browser, boundingRect.left, boundingRect.top, boundingRect.right, boundingRect.bottom);
const base64Image = await makeAreaScreenshot(browser, boundingRect.left, boundingRect.top, boundingRect.right, boundingRect.bottom, options);

// show scrollbars, show & add elements
await afterScreenshot(browser, options);
Expand Down
11 changes: 9 additions & 2 deletions src/scripts/virtualScroll.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,17 @@

export default function virtualScroll(x, y, remove) {
export default function virtualScroll(x, y, remove, options) {
const w = x === 0 ? 0 : -1 * x;
const h = y === 0 ? 0 : -1 * y;

const translate = remove ? 'none' : `translate(${w}px,${h}px)`;
const html = document.documentElement;

/*
* value `options.scroll` indicates that `wdio-screenshot` should move
* an element inside DOM up instead of default `<html />`
*/
let html = options && options.scroll
? document.querySelector('.test-target')
: document.documentElement;
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zinserjan we can throw an error if selector doesn't match any element in DOM to help for debugging.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO the query Selector should be configuration if we are adding a scroll option.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like the forked repo (autopilothq/wdio-screenshot) master branch has fixed this in a later commit. But those changes haven't been merged into the autopilothq:set-scroll-area-bug-fix branch, where this PR originated from.


html.style.webkitTransform = translate;
html.style.mozTransform = translate;
Expand Down
2 changes: 0 additions & 2 deletions src/utils/strategies/BaseStrategy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,6 @@ export default class BaseStrategy {
throw new Error('startY is out of range');
} else if (endX > documentWidth) {
throw new Error('endX is out of range');
} else if (endY > documentHeight) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we are passing options, I would disabling this error should be in the option as well. By removing this, this is breaking expected behavior (though I think most people would be okay with it)

throw new Error('endY is out of range');
}

this.area = {
Expand Down
21 changes: 21 additions & 0 deletions test/fixture/web/integration/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,3 +175,24 @@ body {
.coral {
background-color: coral;
}

/*
* responsive-scroll.html
* Two blocks within a main block. Inner blocks
* sit beside each other in big screens (desktop)
* and under each other in small screens (mobile)
* second block will be partly visible.
* This is to test behaviour of `wdio-screenshot`'s
* saveElementScreenshot() for the second element
*/

.endY-absolute {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.endY-scroll {
overflow: scroll;
}
125 changes: 125 additions & 0 deletions test/fixture/web/integration/responsive-scroll.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
<!DOCTYPE html>
<html>
<head>
<title>wdio-screenshot responsive with scroll</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<style>
html {
height: 100%;
}

body {
overflow: hidden;
min-height: 100%;
}
</style>
</head>
<body>
<div class="endY-absolute">
<div class="endY-absolute endY-scroll">
<div class="container responsive test-target">
<div class="row">
<div class="col-xs-4">
<div class="box red"></div>
</div>
<div class="col-xs-4">
<div class="box blue"></div>
</div>
<div class="col-xs-4">
<div class="box green"></div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="box pink"></div>
</div>
<div class="col-xs-4">
<div class="box orange"></div>
</div>
<div class="col-xs-4">
<div class="box white"></div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="box cyan"></div>
</div>
<div class="col-xs-4">
<div class="box chocolate"></div>
</div>
<div class="col-xs-4">
<div class="box gray"></div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="box indigo"></div>
</div>
<div class="col-xs-4">
<div class="box lime"></div>
</div>
<div class="col-xs-4">
<div class="box magenta"></div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="box maroon"></div>
</div>
<div class="col-xs-4">
<div class="box navy"></div>
</div>
<div class="col-xs-4">
<div class="box olive"></div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="box silver"></div>
</div>
<div class="col-xs-4">
<div class="box snow"></div>
</div>
<div class="col-xs-4">
<div class="box red"></div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="box tan"></div>
</div>
<div class="col-xs-4">
<div class="box tomato"></div>
</div>
<div class="col-xs-4">
<div class="box violet"></div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="box sienna"></div>
</div>
<div class="col-xs-4">
<div class="box purple"></div>
</div>
<div class="col-xs-4">
<div class="box moccasin"></div>
</div>
</div>
<div class="row">
<div class="col-xs-4">
<div class="box khaki"></div>
</div>
<div class="col-xs-4">
<div class="box gold"></div>
</div>
<div class="col-xs-4">
<div class="box coral"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Binary file added .../fixture/web/screenshots/desktop-responsive-scrolling-document-element-1600.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...xture/web/screenshots/desktop-responsive-scrolling-document-element-1600_ie.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added test/fixture/web/screenshots/desktop-responsive-scrolling-document-element-480.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...ixture/web/screenshots/desktop-responsive-scrolling-document-element-480_ie.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 41 additions & 0 deletions test/integration/specs/desktop.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,9 @@ const screenElementModifierRemoveDocument480 = getBrowserSpecificFile(path.join(
const screenElementModifierRemoveViewport480 = getBrowserSpecificFile(path.join(screenshotDir, 'desktop-element-modifier-remove-viewport-480.png'));
const screenElementModifierRemoveElement480 = getBrowserSpecificFile(path.join(screenshotDir, 'desktop-element-modifier-remove-element-480.png'));

const screenResponsiveScrollingDocumentElement480 = getBrowserSpecificFile(path.join(screenshotDir, 'desktop-responsive-scrolling-document-element-480.png'));
const screenResponsiveScrollingDocumentElement1600 = getBrowserSpecificFile(path.join(screenshotDir, 'desktop-responsive-scrolling-document-element-1600.png'));

function isIE() {
const { browserName } = browser.desiredCapabilities;
return browserName === 'internet explorer';
Expand Down Expand Up @@ -470,6 +473,44 @@ describe('integration tests for desktop browsers', function () {

});

/*
* The purpose of following two tests are to make sure `wdio-screenshot` is capable of
* taking screenshots of an element that is partially visible in one resolution (mobile)
* and completely visible in another one (desktop)
*/
context('responsive sites with scrollable element - responsive-scroll.html', function () {
context('saveElementScreenshot', function () {
beforeEach(async function () {
await browser.url('/responsive-scroll.html');
await browser.pause(3000);
});

it('with window size 480px', async function () {
const screenPath = path.join(tmpDir, '/desktop-responsive-scrolling-document-element-480', `${generateUUID()}.png`);

await browser.setViewportSize({width: 480, height: 500});
await browser.pause(500);
await browser.saveElementScreenshot(screenPath, '.test-target', {
scroll: '.endY-scroll',
});

await compareImages(screenPath, screenResponsiveScrollingDocumentElement480);
});

it('with window size 1600px', async function () {
const screenPath = path.join(tmpDir, '/desktop-responsive-scrolling-document-element-1600', `${generateUUID()}.png`);

await browser.setViewportSize({width: 1600, height: 500});
await browser.pause(500);
await browser.saveElementScreenshot(screenPath, '.test-target', {
scroll: '.endY-scroll',
});

await compareImages(screenPath, screenResponsiveScrollingDocumentElement1600);
});
});
});

// context.only('take screenshots', function () {
// context('responsive sites - responsive.html', function () {
// beforeEach(async function () {
Expand Down