Skip to content

Testing: Experiment with Puppeteer for E2E testing #5618

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

Merged
youknowriad merged 16 commits into from
Mar 23, 2018
Merged

Testing: Experiment with Puppeteer for E2E testing #5618

Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
b132e0d
Testing: Try puppeteer for E2E testing
aduth Mar 14, 2018
e7300e0
E2E tests: move the hello gutenberg cypress test
youknowriad Mar 20, 2018
85c9b8e
E2E tests: Adding blocks test moved to puppeteer
youknowriad Mar 20, 2018
4847a53
Add multi-selection test
youknowriad Mar 21, 2018
c4ad0c7
Adding the managing links test
youknowriad Mar 21, 2018
327ef3d
Replace cypress with jest puppeteer
youknowriad Mar 21, 2018
db19420
Remove useless eslint configs
youknowriad Mar 21, 2018
2453c0f
Removing useless comments
youknowriad Mar 21, 2018
60910bc
Using snapshots for adding blocks tests
youknowriad Mar 21, 2018
24f2d1a
update Puppeteer to 1.2.0
youknowriad Mar 21, 2018
67813ee
Increase Jest Timeout for slow CI environments
youknowriad Mar 21, 2018
e35fbfa
More stable tests by increasing timeouts and launching a new page on …
youknowriad Mar 21, 2018
2045979
Try treating the timeout as a successful navigation
youknowriad Mar 21, 2018
c829405
Tools: Use Eslint overrides for e2e tests
gziolo Mar 22, 2018
397d36e
Tools: Use Eslint overrides for e2e tests
gziolo Mar 22, 2018
d9acccf
Adding dependencies comment
youknowriad Mar 22, 2018
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
Prev Previous commit
Next Next commit
Try treating the timeout as a successful navigation
  • Loading branch information
@youknowriad
youknowriad committed Mar 21, 2018
commit 20459796ebfe7c960786a5feefcd5b921a3adefa
34 changes: 30 additions & 4 deletions test/e2e/support/utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import url from 'url';
const BASE_URL = 'http://localhost:8888';
Copy link
Member

@gziolo gziolo Mar 22, 2018

Choose a reason for hiding this comment

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

It was possible to provide a different value for BASE_URL, USERNAME and PASSWORD. We should look into it.

Copy link
Member

@gziolo gziolo Mar 22, 2018

Choose a reason for hiding this comment

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

See: cypress_base_url=http://my-custom-basee-url cypress_username=myusername cypress_password=mypassword npm run test-e2e

Copy link
Contributor

@youknowriad youknowriad Mar 22, 2018

Choose a reason for hiding this comment

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

yes, this was available by default in cypress, we need to do it ourselves in the puppeteer setup but not that hard I think.

Copy link
Member

@gziolo gziolo Mar 22, 2018

Choose a reason for hiding this comment

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

Yes, shouldn't be an issue. Can be done later.

Copy link
Member Author

@aduth aduth Mar 23, 2018

Choose a reason for hiding this comment

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

Could just be some simple env variables:

const { E2E_BASE_URL = 'http://localhost:8888' } = process.env;

Copy link
Member

@gziolo gziolo Mar 23, 2018

Choose a reason for hiding this comment

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

There was this idea someone shared, that we might want to introduce wordpress section inside package.json to provide a way to override some variables.

{
    "wordpress": {
        "baseUrl": "http://localhost:8888"
    }
}

const USERNAME = 'admin';
const PASSWORD = 'password';
const NAVIGATION_TIMEOUT = 20000;

function getUrl( urlPath ) {
return path.join( BASE_URL, urlPath );
Expand All @@ -13,19 +14,45 @@ function getCurrentPathName() {
return url.parse( page.url() ).pathname;
}

async function gotoUrl( destUrl ) {
const promise = page.goto( destUrl, { timeout: 0 } );
await new Promise( ( resolve ) => {
let resolved = false;
const markResolvedAndResolve = () => {
if ( ! resolved ) {
resolve();
resolved = true;
}
};
setTimeout( markResolvedAndResolve, NAVIGATION_TIMEOUT );
promise.then( markResolvedAndResolve );
} );
}

async function login() {
if ( getCurrentPathName() !== '/wp-login.php' ) {
await page.goto( getUrl( 'wp-login.php' ) );
await gotoUrl( getUrl( 'wp-login.php' ) );
}

await page.type( '#user_login', USERNAME );
await page.type( '#user_pass', PASSWORD );
await page.click( '#wp-submit' );
return page.waitForNavigation();

await new Promise( ( resolve ) => {
let resolved = false;
const markResolvedAndResolve = () => {
if ( ! resolved ) {
resolve();
resolved = true;
}
};
setTimeout( markResolvedAndResolve, NAVIGATION_TIMEOUT );
page.waitForNavigation( { timeout: 0 } ).then( markResolvedAndResolve );
} );
}

export async function visitAdmin( adminPath ) {
await page.goto( path.join( BASE_URL, 'wp-admin', adminPath ) );
await gotoUrl( path.join( BASE_URL, 'wp-admin', adminPath ) );
if ( getCurrentPathName() === '/wp-login.php' ) {
await login();
return visitAdmin( adminPath );
Expand All @@ -39,5 +66,4 @@ export async function newPost() {
export async function newDesktopBrowserPage() {
global.page = await browser.newPage();
await page.setViewport( { width: 1000, height: 700 } );
await page.setDefaultNavigationTimeout( 60000 );
}