diff --git a/packages/e2e-tests/specs/editor/various/change-detection.test.js b/packages/e2e-tests/specs/editor/various/change-detection.test.js index 514a7fdd106f10..b10f67b40ef978 100644 --- a/packages/e2e-tests/specs/editor/various/change-detection.test.js +++ b/packages/e2e-tests/specs/editor/various/change-detection.test.js @@ -77,7 +77,10 @@ describe( 'Change detection', () => { } ); it( 'Should autosave post', async () => { - await page.type( '.editor-post-title__input', 'Hello World' ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + await frame.type( '.editor-post-title__input', 'Hello World' ); // Force autosave to occur immediately. await Promise.all( [ @@ -93,7 +96,10 @@ describe( 'Change detection', () => { } ); it( 'Should prompt to confirm unsaved changes for autosaved draft for non-content fields', async () => { - await page.type( '.editor-post-title__input', 'Hello World' ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + await frame.type( '.editor-post-title__input', 'Hello World' ); // Toggle post as needing review (not persisted for autosave). await ensureSidebarOpened(); @@ -116,7 +122,10 @@ describe( 'Change detection', () => { } ); it( 'Should prompt to confirm unsaved changes for autosaved published post', async () => { - await page.type( '.editor-post-title__input', 'Hello World' ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + await frame.type( '.editor-post-title__input', 'Hello World' ); await publishPost(); @@ -129,7 +138,7 @@ describe( 'Change detection', () => { ] ); // Should be dirty after autosave change of published post. - await page.type( '.editor-post-title__input', '!' ); + await frame.type( '.editor-post-title__input', '!' ); await Promise.all( [ page.waitForSelector( '.editor-post-publish-button.is-busy' ), @@ -159,7 +168,10 @@ describe( 'Change detection', () => { } ); it( 'Should prompt if property changed without save', async () => { - await page.type( '.editor-post-title__input', 'Hello World' ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + await frame.type( '.editor-post-title__input', 'Hello World' ); await assertIsDirty( true ); } ); @@ -172,7 +184,10 @@ describe( 'Change detection', () => { } ); it( 'Should not prompt if changes saved', async () => { - await page.type( '.editor-post-title__input', 'Hello World' ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + await frame.type( '.editor-post-title__input', 'Hello World' ); await saveDraft(); @@ -189,7 +204,10 @@ describe( 'Change detection', () => { } ); it( 'Should not save if all changes saved', async () => { - await page.type( '.editor-post-title__input', 'Hello World' ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + await frame.type( '.editor-post-title__input', 'Hello World' ); await saveDraft(); @@ -202,7 +220,10 @@ describe( 'Change detection', () => { } ); it( 'Should prompt if save failed', async () => { - await page.type( '.editor-post-title__input', 'Hello World' ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + await frame.type( '.editor-post-title__input', 'Hello World' ); await page.setOfflineMode( true ); @@ -228,7 +249,10 @@ describe( 'Change detection', () => { } ); it( 'Should prompt if changes and save is in-flight', async () => { - await page.type( '.editor-post-title__input', 'Hello World' ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + await frame.type( '.editor-post-title__input', 'Hello World' ); // Hold the posts request so we don't deal with race conditions of the // save completing early. Other requests should be allowed to continue, @@ -244,7 +268,10 @@ describe( 'Change detection', () => { } ); it( 'Should prompt if changes made while save is in-flight', async () => { - await page.type( '.editor-post-title__input', 'Hello World' ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + await frame.type( '.editor-post-title__input', 'Hello World' ); // Hold the posts request so we don't deal with race conditions of the // save completing early. Other requests should be allowed to continue, @@ -254,7 +281,7 @@ describe( 'Change detection', () => { // Keyboard shortcut Ctrl+S save. await pressKeyWithModifier( 'primary', 'S' ); - await page.type( '.editor-post-title__input', '!' ); + await frame.type( '.editor-post-title__input', '!' ); await page.waitForSelector( '.editor-post-save-draft' ); await releaseSaveIntercept(); @@ -263,7 +290,10 @@ describe( 'Change detection', () => { } ); it( 'Should prompt if property changes made while save is in-flight, and save completes', async () => { - await page.type( '.editor-post-title__input', 'Hello World' ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + await frame.type( '.editor-post-title__input', 'Hello World' ); // Hold the posts request so we don't deal with race conditions of the // save completing early. @@ -273,7 +303,7 @@ describe( 'Change detection', () => { await pressKeyWithModifier( 'primary', 'S' ); // Dirty post while save is in-flight. - await page.type( '.editor-post-title__input', '!' ); + await frame.type( '.editor-post-title__input', '!' ); // Allow save to complete. Disabling interception flushes pending. await Promise.all( [ @@ -285,7 +315,10 @@ describe( 'Change detection', () => { } ); it( 'Should prompt if block revision is made while save is in-flight, and save completes', async () => { - await page.type( '.editor-post-title__input', 'Hello World' ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + await frame.type( '.editor-post-title__input', 'Hello World' ); // Hold the posts request so we don't deal with race conditions of the // save completing early. @@ -335,8 +368,12 @@ describe( 'Change detection', () => { // Save await saveDraft(); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + // Verify that the title is empty. - const title = await page.$eval( + const title = await frame.$eval( '.editor-post-title__input', ( element ) => element.innerHTML ); @@ -348,7 +385,10 @@ describe( 'Change detection', () => { it( 'should not prompt to confirm unsaved changes when trashing an existing post', async () => { // Enter title. - await page.type( '.editor-post-title__input', 'Hello World' ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + await frame.type( '.editor-post-title__input', 'Hello World' ); // Save await saveDraft(); @@ -391,13 +431,17 @@ describe( 'Change detection', () => { pressKeyWithModifier( 'primary', 'S' ), ] ); + const frame = await page + .frames() + .find( ( f ) => f.name() === 'editor-content' ); + // Increase the paragraph's font size. - await page.click( '[data-type="core/paragraph"]' ); + await frame.click( '[data-type="core/paragraph"]' ); await page.click( '.components-font-size-picker__select' ); await page.click( '.components-custom-select-control__item:nth-child(3)' ); - await page.click( '[data-type="core/paragraph"]' ); + await frame.click( '[data-type="core/paragraph"]' ); // Check that the post is dirty. await page.waitForSelector( '.editor-post-save-draft' ); @@ -409,12 +453,12 @@ describe( 'Change detection', () => { ] ); // Increase the paragraph's font size again. - await page.click( '[data-type="core/paragraph"]' ); + await frame.click( '[data-type="core/paragraph"]' ); await page.click( '.components-font-size-picker__select' ); await page.click( '.components-custom-select-control__item:nth-child(4)' ); - await page.click( '[data-type="core/paragraph"]' ); + await frame.click( '[data-type="core/paragraph"]' ); // Check that the post is dirty. await page.waitForSelector( '.editor-post-save-draft' );