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

Jump to bottom

E2E perf tests: run each test in a separate page #47889

Merged
merged 5 commits into from
Feb 10, 2023
Merged

E2E perf tests: run each test in a separate page #47889

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
23acde2
E2E perf tests: run each test in a separate page
sgomes Feb 8, 2023
0ef78ce
Throw away 1st measurement to avoid caching quirks
sgomes Feb 9, 2023
2b092e2
Move page closing to `beforeEach`
sgomes Feb 10, 2023
383811d
Move metric collection inside conditional
sgomes Feb 10, 2023
b863d42
Revert "Move page closing to `beforeEach`"
sgomes Feb 10, 2023
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
21 changes: 14 additions & 7 deletions packages/e2e-tests/config/setup-performance-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,11 @@ const PUPPETEER_TIMEOUT = process.env.PUPPETEER_TIMEOUT;
// The Jest timeout is increased because these tests are a bit slow.
jest.setTimeout( PUPPETEER_TIMEOUT || 100000 );

async function setupBrowser() {
await clearLocalStorage();
async function setupPage() {
await setBrowserViewport( 'large' );
await page.emulateMediaFeatures( [
{ name: 'prefers-reduced-motion', value: 'reduce' },
] );
}

// Before every test suite run, delete all content created by the test. This ensures
Expand All @@ -32,13 +34,18 @@ beforeAll( async () => {

await trashAllPosts();
await trashAllPosts( 'wp_block' );
await setupBrowser();
await clearLocalStorage();
await setupPage();
await activatePlugin( 'gutenberg-test-plugin-disables-the-css-animations' );
await page.emulateMediaFeatures( [
{ name: 'prefers-reduced-motion', value: 'reduce' },
] );
} );

afterEach( async () => {
await setupBrowser();
// Clear localStorage between tests so that the next test starts clean.
await clearLocalStorage();
// Close the previous page entirely and create a new page, so that the next test
// isn't affected by page unload work.
await page.close();
sgomes marked this conversation as resolved.
Show resolved Hide resolved
page = await browser.newPage();
// Set up testing config on new page.
await setupPage();
sgomes marked this conversation as resolved.
Show resolved Hide resolved
} );
47 changes: 31 additions & 16 deletions packages/e2e-tests/specs/performance/post-editor.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,28 +105,43 @@ describe( 'Post Editor Performance', () => {
readFile( join( __dirname, '../../assets/large-post.html' ) )
);
await saveDraft();
let i = 5;
const draftURL = await page.url();

// Number of sample measurements to take.
const samples = 5;
// Number of throwaway measurements to perform before recording samples.
// Having at least one helps ensure that caching quirks don't manifest in
// the results.
const throwaway = 1;

let i = throwaway + samples;
while ( i-- ) {
Copy link
Member

Choose a reason for hiding this comment

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

if only we had a construct that let us assign an initial counter value and specify how to bump it on each iteration 😆

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I suppose I could have refactored the code further as I was changing it 🙂

await page.reload();
await page.close();
page = await browser.newPage();

await page.goto( draftURL );
await page.waitForSelector( '.edit-post-layout', {
timeout: 120000,
} );
await canvas().waitForSelector( '.wp-block', { timeout: 120000 } );
const {
serverResponse,
firstPaint,
domContentLoaded,
loaded,
firstContentfulPaint,
firstBlock,
} = await getLoadingDurations();

results.serverResponse.push( serverResponse );
results.firstPaint.push( firstPaint );
results.domContentLoaded.push( domContentLoaded );
results.loaded.push( loaded );
results.firstContentfulPaint.push( firstContentfulPaint );
results.firstBlock.push( firstBlock );
if ( i < samples ) {
const {
serverResponse,
firstPaint,
domContentLoaded,
loaded,
firstContentfulPaint,
firstBlock,
} = await getLoadingDurations();

results.serverResponse.push( serverResponse );
results.firstPaint.push( firstPaint );
results.domContentLoaded.push( domContentLoaded );
results.loaded.push( loaded );
results.firstContentfulPaint.push( firstContentfulPaint );
results.firstBlock.push( firstBlock );
}
}
} );

Expand Down
111 changes: 69 additions & 42 deletions packages/e2e-tests/specs/performance/site-editor.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,34 +30,29 @@ import {

jest.setTimeout( 1000000 );

const results = {
serverResponse: [],
firstPaint: [],
domContentLoaded: [],
loaded: [],
firstContentfulPaint: [],
firstBlock: [],
type: [],
typeContainer: [],
focus: [],
inserterOpen: [],
inserterHover: [],
inserterSearch: [],
listViewOpen: [],
};

let id;

describe( 'Site Editor Performance', () => {
beforeAll( async () => {
await activateTheme( 'emptytheme' );
await deleteAllTemplates( 'wp_template' );
await deleteAllTemplates( 'wp_template_part' );
} );
afterAll( async () => {
await deleteAllTemplates( 'wp_template' );
await deleteAllTemplates( 'wp_template_part' );
await activateTheme( 'twentytwentyone' );
} );

it( 'Loading', async () => {
const results = {
serverResponse: [],
firstPaint: [],
domContentLoaded: [],
loaded: [],
firstContentfulPaint: [],
firstBlock: [],
type: [],
typeContainer: [],
focus: [],
inserterOpen: [],
inserterHover: [],
inserterSearch: [],
listViewOpen: [],
};

const html = readFile(
join( __dirname, '../../assets/large-post.html' )
Expand All @@ -80,37 +75,69 @@ describe( 'Site Editor Performance', () => {
}, html );
await saveDraft();

const id = await page.evaluate( () =>
id = await page.evaluate( () =>
new URL( document.location ).searchParams.get( 'post' )
);
} );

afterAll( async () => {
await deleteAllTemplates( 'wp_template' );
await deleteAllTemplates( 'wp_template_part' );
await activateTheme( 'twentytwentyone' );
} );

beforeEach( async () => {
await visitSiteEditor( { postId: id, postType: 'page' } );
} );

it( 'Loading', async () => {
const editorURL = await page.url();

let i = 3;
// Number of sample measurements to take.
const samples = 3;
// Number of throwaway measurements to perform before recording samples.
// Having at least one helps ensure that caching quirks don't manifest in
// the results.
const throwaway = 1;

let i = throwaway + samples;

// Measuring loading time.
while ( i-- ) {
await page.reload();
await page.close();
page = await browser.newPage();

await page.goto( editorURL );
await page.waitForSelector( '.edit-site-visual-editor', {
timeout: 120000,
} );
await canvas().waitForSelector( '.wp-block', { timeout: 120000 } );
const {
serverResponse,
firstPaint,
domContentLoaded,
loaded,
firstContentfulPaint,
firstBlock,
} = await getLoadingDurations();

results.serverResponse.push( serverResponse );
results.firstPaint.push( firstPaint );
results.domContentLoaded.push( domContentLoaded );
results.loaded.push( loaded );
results.firstContentfulPaint.push( firstContentfulPaint );
results.firstBlock.push( firstBlock );

if ( i < samples ) {
const {
serverResponse,
firstPaint,
domContentLoaded,
loaded,
firstContentfulPaint,
firstBlock,
} = await getLoadingDurations();

results.serverResponse.push( serverResponse );
results.firstPaint.push( firstPaint );
results.domContentLoaded.push( domContentLoaded );
results.loaded.push( loaded );
results.firstContentfulPaint.push( firstContentfulPaint );
results.firstBlock.push( firstBlock );
}
}
} );

it( 'Typing', async () => {
await page.waitForSelector( '.edit-site-visual-editor', {
timeout: 120000,
} );
await canvas().waitForSelector( '.wp-block', { timeout: 120000 } );

// Measuring typing performance inside the post content.
await canvas().waitForSelector(
Expand All @@ -121,7 +148,7 @@ describe( 'Site Editor Performance', () => {
'[data-type="core/post-content"] [data-type="core/paragraph"]'
);
await insertBlock( 'Paragraph' );
i = 200;
let i = 200;
const traceFile = __dirname + '/trace.json';
await page.tracing.start( {
path: traceFile,
Expand Down