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.
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
Switch UI tests from phantomjs to chrome headless #14421
Merged
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
… before when there is a failure.
diosmosis
changed the title
Chrome headless3
Switch UI tests from phantomjs to chrome headless
May 8, 2019
diosmosis
added
the
c: Tests & QA
For issues related to automated tests or making it easier to QA & test issues.
label
May 8, 2019
Nice work! @diosmosis @sgiehl 🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Installing chrome headless:
Then execute
tests:run-ui
as usual.Chromium Quirks
Generally to write new tests or convert existing tests, you can look at some of the already converted tests and copy the format. It's pretty straightforward and shouldn't take too long to figure out.
Note: the comparison threshold feature is still there, but it no longer uses resemblejs since that library can't be used synchronously (well, not easily). There's an example of the use of comparison threshold in UsersManager_spec.js.
Chromium does, however, have some quirks it helps to be aware of, including:
!important
), to wait for elements in the modal to become visible, and to experiment betweenconst e = await page.$('.modal'); await e.screenshot();
vsawait page.screenshotSelector('.modal');
(sometimes one will work, sometimes the other; usually the first format should be favored since it depends on puppeteer's code and not our own).await page.waitForNetworkIdle();
to make sure as many http requests are completed at first (so we don't take a screenshot before the page load occurs if there's a widget on the screen), then weawait page.waitFor('.widget', { visible: true });
to make sure a widget is visible (otherwise the screenshot could be taken before the widget HTTP requests are sent), then wait weawait page.waitForNetworkIdle();
because not all of the widgets may have completed loading. It takes a bit of experimentation for each test, but once figured out the tests seem to pass predictably.