Migrate Preferences Test to Playwright #44107
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); | ||
|
|
||
| test.describe( 'preferences', () => { | ||
| test( 'remembers sidebar dismissal between sessions', async ( { | ||
| page, | ||
| admin, | ||
| } ) => { | ||
| await admin.createNewPost(); | ||
| // Open by default. | ||
| await expect( | ||
| page.locator( | ||
| '.components-button.edit-post-sidebar__panel-tab.is-active' | ||
| ) | ||
| ).toHaveText( 'Post' ); | ||
|
|
||
| // Change to "Block" tab. | ||
| await page.click( 'role=button[name="Block"i]' ); | ||
|
|
||
| await expect( | ||
| page.locator( | ||
| '.components-button.edit-post-sidebar__panel-tab.is-active' | ||
| ) | ||
|
There was a problem hiding this comment. Again I think a role selector can be used for this. It will be different to the one above as it's a different button: |
||
| ).toHaveText( 'Block' ); | ||
|
|
||
| // Regression test: Reload resets to document tab. | ||
| // | ||
| // See: https://github.com/WordPress/gutenberg/issues/6377 | ||
| // See: https://github.com/WordPress/gutenberg/pull/8995 | ||
| await page.reload(); | ||
| await page.waitForSelector( '.edit-post-layout' ); | ||
|
There was a problem hiding this comment. This line essentially waits for the block editor to load, but I think it line can be removed. The line below it could be changed to |
||
| await expect( | ||
| page.locator( | ||
| '.components-button.edit-post-sidebar__panel-tab.is-active' | ||
| ) | ||
|
There was a problem hiding this comment. This is the same element as the locator from my first comment (role "button", name "Post (selected)"). It could be assigned to a variable at the start of the test and that variable used here. |
||
| ).toHaveText( 'Post' ); | ||
|
|
||
| // Dismiss. | ||
| await page.click( | ||
| '.edit-post-sidebar__panel-tabs [aria-label="Close settings"]' | ||
|
There was a problem hiding this comment. This one can be a role locator too: ( button / "Close settings" ) |
||
| ); | ||
| await expect( | ||
| page.locator( '.edit-post-sidebar__panel-tab.is-active' ) | ||
|
There was a problem hiding this comment. Again I think it'd be fine to use the locator from my first comment (assign it to a variable and use the variable here). |
||
| ).not.toBeVisible(); | ||
|
|
||
| // Remember after reload. | ||
| await page.reload(); | ||
| await page.waitForSelector( '.edit-post-layout' ); | ||
|
There was a problem hiding this comment. I'm not a huge fan of this line because it waits for something that's unrelated to the user interface being tested. If it could be changed to a role selector for this element, that would be great: |
||
| await expect( | ||
| page.locator( '.edit-post-sidebar__panel-tab.is-active' ) | ||
|
There was a problem hiding this comment. Same again, it'd be fine to use the locator from my first comment (assign it to a variable and use the variable here). |
||
| ).not.toBeVisible(); | ||
| } ); | ||
| } ); | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The test seems to be failing on this line.
The issue could be that Playwright isn't waiting for the element. You could try using
expect.poll.It'd be good to try changing the classname selector to a role selector. This is what my browser dev tools shows as the accessibility properties:
(so role is "button", name is "Post (selected)")
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Hi @talldan, Previously also tried
expect.pollbut expect.poll excepts function only. I also tried to pass the async function within it but still it seems to be not working.Let me know your thoughts on same.