diff --git a/docs/contributors/code/e2e/MIGRATION.md b/docs/contributors/code/e2e/MIGRATION.md index e9376b3db320b8..030c6c87f2c304 100644 --- a/docs/contributors/code/e2e/MIGRATION.md +++ b/docs/contributors/code/e2e/MIGRATION.md @@ -12,22 +12,8 @@ This document outlines a typical flow of migrating a Jest + Puppeteer test to Pl 3. Change all occurrences of `describe`, `beforeAll`, `beforeEach`, `afterEach` and `afterAll` with the `test.` prefix. For instance, `describe` turns into `test.describe`. 4. Use the [fixtures API](https://playwright.dev/docs/test-fixtures) to require previously global variables like `page` and `browser`. 5. Delete all the imports of `e2e-test-utils`. Instead, use the fixtures API to directly get the `admin`, `editor`, `pageUtils` and `requestUtils`. (However, `admin`, `editor` and `pageUtils` are not allowed in `beforeAll` and `afterAll`, rewrite them using `requestUtils` instead.) -6. If tests are for the site editor, configure the editor utils to use an iframe: - ```js - const { - test, - expect, - Editor, - } = require( '@wordpress/e2e-test-utils-playwright' ); - - test.use( { - editor: async ( { page }, use ) => { - await use( new Editor( { page, hasIframe: true } ) ); - }, - } ); - ``` -7. If there's a missing util, try to inline the operations directly in the test if there are only a few steps. If you think it deserves to be implemented as a test util, then follow the [guide](#migration-steps-for-test-utils) below. -8. Manually migrate other details in the tests following the proposed [best practices](https://github.com/WordPress/gutenberg/tree/HEAD/docs/contributors/code/e2e/README.md#best-practices). Note that even though the differences in the API of Playwright and Puppeteer are similar, some manual changes are still required. +6. If there's a missing util, try to inline the operations directly in the test if there are only a few steps. If you think it deserves to be implemented as a test util, then follow the [guide](#migration-steps-for-test-utils) below. +7. Manually migrate other details in the tests following the proposed [best practices](https://github.com/WordPress/gutenberg/tree/HEAD/docs/contributors/code/e2e/README.md#best-practices). Note that even though the differences in the API of Playwright and Puppeteer are similar, some manual changes are still required. ## Migration steps for test utils diff --git a/packages/e2e-test-utils-playwright/README.md b/packages/e2e-test-utils-playwright/README.md index 216509721e44b8..52cf8523159db0 100644 --- a/packages/e2e-test-utils-playwright/README.md +++ b/packages/e2e-test-utils-playwright/README.md @@ -41,13 +41,11 @@ To use these utilities, instantiate them within each test file: ```js test.use( { editor: async ( { page }, use ) => { - await use( new Editor( { page, hasIframe: true } ) ); + await use( new Editor( { page } ) ); }, } ); ``` -The `hasIframe` property denotes whether the editor canvas uses an Iframe, as the site editor currently does. Omit this for non-iframe editors. - Within a test or test utility, use the `canvas` property to select elements within the iframe canvas: ```js diff --git a/packages/e2e-test-utils-playwright/src/editor/index.ts b/packages/e2e-test-utils-playwright/src/editor/index.ts index 3c9ab2d9dbefee..04236ba4dbb468 100644 --- a/packages/e2e-test-utils-playwright/src/editor/index.ts +++ b/packages/e2e-test-utils-playwright/src/editor/index.ts @@ -22,39 +22,23 @@ import { transformBlockTo } from './transform-block-to'; type EditorConstructorProps = { page: Page; - hasIframe?: boolean; }; export class Editor { browser: Browser; page: Page; context: BrowserContext; - #hasIframe: boolean; - constructor( { page, hasIframe = false }: EditorConstructorProps ) { + constructor( { page }: EditorConstructorProps ) { this.page = page; this.context = page.context(); this.browser = this.context.browser()!; - this.#hasIframe = hasIframe; } get canvas(): Frame | Page { - let frame; - - if ( this.#hasIframe ) { - frame = this.page.frame( 'editor-canvas' ); - } else { - frame = this.page; - } - - if ( ! frame ) { - throw new Error( - 'EditorUtils: unable to find editor canvas iframe or page' - ); - } - - return frame; + return this.page.frame( 'editor-canvas' ) || this.page; } + clickBlockOptionsMenuItem = clickBlockOptionsMenuItem.bind( this ); clickBlockToolbarButton = clickBlockToolbarButton.bind( this ); getBlocks = getBlocks.bind( this ); diff --git a/test/e2e/specs/editor/blocks/comments.spec.js b/test/e2e/specs/editor/blocks/comments.spec.js index 3232b8ff95cd8f..55a4cdca8c1c0c 100644 --- a/test/e2e/specs/editor/blocks/comments.spec.js +++ b/test/e2e/specs/editor/blocks/comments.spec.js @@ -1,11 +1,7 @@ /** * WordPress dependencies */ -const { - test, - expect, - Editor, -} = require( '@wordpress/e2e-test-utils-playwright' ); +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); /** * @typedef {import('@playwright/test').Page} Page @@ -16,9 +12,6 @@ test.use( { commentsBlockUtils: async ( { page, admin, requestUtils }, use ) => { await use( new CommentsBlockUtils( { page, admin, requestUtils } ) ); }, - editor: async ( { page }, use ) => { - await use( new Editor( { page, hasIframe: true } ) ); - }, } ); test.describe( 'Comments', () => { diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 3388a8f8180125..89a84c519656ee 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -1,17 +1,7 @@ /** * WordPress dependencies */ -const { - test, - expect, - Editor, -} = require( '@wordpress/e2e-test-utils-playwright' ); - -test.use( { - editor: async ( { page }, use ) => { - await use( new Editor( { page, hasIframe: true } ) ); - }, -} ); +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); test.describe( 'As a user I want the navigation block to fallback to the best possible default', diff --git a/test/e2e/specs/site-editor/push-to-global-styles.spec.js b/test/e2e/specs/site-editor/push-to-global-styles.spec.js index ce854f476e4f9d..fbdcc88600df6c 100644 --- a/test/e2e/specs/site-editor/push-to-global-styles.spec.js +++ b/test/e2e/specs/site-editor/push-to-global-styles.spec.js @@ -1,17 +1,7 @@ /** * WordPress dependencies */ -const { - test, - expect, - Editor, -} = require( '@wordpress/e2e-test-utils-playwright' ); - -test.use( { - editor: async ( { page }, use ) => { - await use( new Editor( { page, hasIframe: true } ) ); - }, -} ); +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); test.describe( 'Push to Global Styles button', () => { test.beforeAll( async ( { requestUtils } ) => { diff --git a/test/e2e/specs/site-editor/template-part.spec.js b/test/e2e/specs/site-editor/template-part.spec.js index 803ed2e57a8fad..5668422c8b9e0e 100644 --- a/test/e2e/specs/site-editor/template-part.spec.js +++ b/test/e2e/specs/site-editor/template-part.spec.js @@ -1,17 +1,7 @@ /** * WordPress dependencies */ -const { - test, - expect, - Editor, -} = require( '@wordpress/e2e-test-utils-playwright' ); - -test.use( { - editor: async ( { page }, use ) => { - await use( new Editor( { page, hasIframe: true } ) ); - }, -} ); +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); test.describe( 'Template Part', () => { test.beforeAll( async ( { requestUtils } ) => { diff --git a/test/e2e/specs/site-editor/writing-flow.spec.js b/test/e2e/specs/site-editor/writing-flow.spec.js index 6eb4bf3e471ec6..f8fa78b4fd8128 100644 --- a/test/e2e/specs/site-editor/writing-flow.spec.js +++ b/test/e2e/specs/site-editor/writing-flow.spec.js @@ -1,17 +1,7 @@ /** * WordPress dependencies */ -const { - test, - expect, - Editor, -} = require( '@wordpress/e2e-test-utils-playwright' ); - -test.use( { - editor: async ( { page }, use ) => { - await use( new Editor( { page, hasIframe: true } ) ); - }, -} ); +const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); test.describe( 'Site editor writing flow', () => { test.beforeAll( async ( { requestUtils } ) => {