Migrate Preferences Test to Playwright #44107
Conversation
pooja-muchandikar
requested review from
ntwb,
nerrad and
ajitbohra
as code owners
| await expect( | ||
| page.locator( | ||
| '.components-button.edit-post-sidebar__panel-tab.is-active' | ||
| ) | ||
| ).toHaveText( 'Post' ); |
There was a problem hiding this comment.
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.
Hi @talldan, Previously also tried expect.poll but 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.
| 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:
| 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.
|
|
||
| // 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" )
| // 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.poll(, which would make the test wait for the panel tab to be present (so it would have the same result of waiting for the editor to load).
| '.edit-post-sidebar__panel-tabs [aria-label="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).
|
|
||
| // 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 page.reload(); | ||
| await page.waitForSelector( '.edit-post-layout' ); | ||
| 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).
|
Hi @talldan, Thanks for the feedbacks, I have resolved all of those. Could you please review once? |
|
Hi @talldan, Any further suggestions on this PR? |
skorasaurus
added
the
[Type] Automated Testing
What?
Part of #38851.
Migrate preferences.test.js to its Playwright version.
Why?
Part of #38851.
How?
See MIGRATION.md for migration steps.
Testing Instructions
Run
npm run test-e2e:playwright test/e2e/specs/editor/various/preferences.spec.js