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

Revert "E2E perf tests: run each test in a separate page (#47889)" #48262

Closed
wants to merge 1 commit into from
Closed

Revert "E2E perf tests: run each test in a separate page (#47889)" #48262

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 7 additions & 14 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,11 +19,9 @@ 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 setupPage() {
async function setupBrowser() {
await clearLocalStorage();
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 @@ -34,18 +32,13 @@ beforeAll( async () => {

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

afterEach( async () => {
// 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();
page = await browser.newPage();
// Set up testing config on new page.
await setupPage();
await setupBrowser();
} );
47 changes: 16 additions & 31 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,43 +105,28 @@ describe( 'Post Editor Performance', () => {
readFile( join( __dirname, '../../assets/large-post.html' ) )
);
await saveDraft();
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;
let i = 5;
while ( i-- ) {
await page.close();
page = await browser.newPage();

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

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 );
}
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
117 changes: 43 additions & 74 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,29 +30,34 @@ 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 @@ -75,72 +80,36 @@ describe( 'Site Editor Performance', () => {
}, html );
await saveDraft();

id = await page.evaluate( () =>
const id = await page.evaluate( () =>
new URL( document.location ).searchParams.get( 'post' )
);
} );
await visitSiteEditor( { postId: id, postType: 'page' } );

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();

// 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;
let i = 3;

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

await page.goto( editorURL );
await page.reload();
await page.waitForSelector( '.edit-site-visual-editor', {
timeout: 120000,
} );
await canvas().waitForSelector( '.wp-block', { timeout: 120000 } );

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 );
}
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 @@ -151,7 +120,7 @@ describe( 'Site Editor Performance', () => {
'[data-type="core/post-content"] [data-type="core/paragraph"]'
);
await insertBlock( 'Paragraph' );
let i = 200;
i = 200;
const traceFile = __dirname + '/trace.json';
await page.tracing.start( {
path: traceFile,
Expand Down