Migrate Cover Block tests to Playwright #45784

worldomonation · 2022-11-15T20:45:46Z

What?

This PR is part of the migration effort tracked at #38851.

Why?

This PR proposes a migration of the cover.test.js to the new Playwright-based framework.

How?

Testing Instructions

npm run test:e2e:playwright -- test/e2e/specs/editor/blocks/cover.spec.js

In the current form (pending outcome of this question, it should produce the following outcome:

Running 6 tests using 1 worker

  ✓  1 …2 › Cover › can set overlay color using color picker on block placeholder (2.4s)
Failed to load resource: the server responded with a status of 404 (Not Found)
  ✓  2 … Cover › can set background image using image upload on block placeholder (3.3s)
Failed to load resource: the server responded with a status of 404 (Not Found)
  ✓  3 …over.spec.js:102:2 › Cover › dims background image down by 50% by default (1.8s)
Failed to load resource: the server responded with a status of 404 (Not Found)
  ✓  4 …] › editor/blocks/cover.spec.js:126:2 › Cover › can have the title edited (2.3s)
Failed to load resource: the server responded with a status of 404 (Not Found)
  ✓  5 …tor/blocks/cover.spec.js:151:2 › Cover › can be resized using drag & drop (2.4s)
Failed to load resource: the server responded with a status of 404 (Not Found)
  -  6 …er › dims the background image down by 50% when transformed from the Image block

  1 skipped
  5 passed (13.1s)

Screenshots or screencast

codesandbox · 2022-11-15T20:45:49Z

Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

github-actions · 2022-11-15T20:46:10Z

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @worldomonation! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

worldomonation · 2022-11-15T20:54:16Z

Hi folks - this is my first PR in the Gutenberg repo. As I understand it, I must wait for the tests to be triggered manually.

test/e2e/specs/editor/blocks/cover.spec.js

worldomonation · 2022-11-15T21:41:57Z

Looks like my run at https://github.com/WordPress/gutenberg/actions/runs/3474015855 failed. I will need to investigate why it is failing on CI and not locally.

kevin940726 · 2023-01-02T17:40:54Z

Hi! I only just saw this now 😞 . Sorry for the late reply! And thank you for your contribution!

worldomonation · 2023-04-26T08:55:42Z

@kevin940726 I have a quick question regarding the await editor.transformBlockTo( <block_name> ) method.

When I call the aforementioned method in one of the specs I am migrating, the following error is thrown at the end:

  1) [chromium] › editor/blocks/cover.spec.js:200:7 › Cover › dims the background image down by 50% when transformed from the Image block

    Error: page.evaluate: window.wp.galleryBlockV2Enabled is not defined

       at ../../../packages/e2e-test-utils-playwright/src/editor/transform-block-to.ts:13

      11 |  */
      12 | export async function transformBlockTo( this: Editor, name: string ) {
    > 13 | 	await this.page.evaluate(
         | 	                ^
      14 | 		( [ blockName ] ) => {
      15 | 			const clientIds = window.wp.data
      16 | 				.select( 'core/block-editor' )

        at Editor.transformBlockTo (gutenberg/packages/e2e-test-utils-playwright/src/editor/transform-block-to.ts:13:18)
        at gutenberg/test/e2e/specs/editor/blocks/cover.spec.js:221:16

I'm do not understand why the transformBlockTo is calling galleryBlockV2Enabled. Could you point me in the right direction?

- update spec with accessibility-based selectors where possible.

kevin940726 · 2023-04-26T09:38:24Z

@worldomonation Could you share a branch so that I can test locally?

worldomonation · 2023-04-26T09:47:38Z

@worldomonation Could you share a branch so that I can test locally?

Sure, my work is in the forked repo worldomonation:add/playwright-cover-block-e2e.
Link to the branch in my forked repo.

kevin940726 · 2023-04-27T07:12:27Z

@worldomonation I just checked out your code and the test passed locally for me. Could you try again?

worldomonation · 2023-04-27T07:20:50Z

@worldomonation I just checked out your code and the test passed locally for me. Could you try again?

Thanks for trying. I had marked the step with the issue, dims the background image down by 50% when transformed from the Image block, as skipped. Did you unskip it?

kevin940726 · 2023-04-27T07:22:46Z

@worldomonation Yep, I unskipped it.

worldomonation · 2023-04-27T08:04:14Z

@worldomonation Yep, I unskipped it.

I think I figured it out.
I started this PR back at Denver in late 2022, and haven't looked at it until this week. I thought I had updated my local, forked repo with upstream but looks like I neglected to do that plus a npm run build.

It now passes for me locally too. Thanks for helping me work through the issues.

I hope to have this ready for review soon.

- rebase, rebuild and update the selectors

- remove Puppeteer file.

test/e2e/specs/editor/blocks/cover.spec.js

- clarify use of `span` element in the first spec.

test/e2e/specs/editor/blocks/cover.spec.js

…-box__handle-bottom'. - move image upload and filename methods previously handled by `getTestImage` into a POM-like function at bottom of file.

…at locator as starting point for all other interactions. - use `getComputedStyle` instad of `node.style.<attribute>`. - replace implementation detail check on image upload with a `expect.toPass` check. - remove steps when resizing box. - replace implementation detail check for coverbox height with truthy check.

worldomonation · 2023-05-10T07:31:55Z

@kevin940726 I left two questions - 1 and 2 that I needed further clarification on how to proceed.

I'm more than happy for more rounds of code reviews should you deem it necessary, so please feel free to take apart the revised spec. Thanks!

kevin940726

Thanks again for the updates! I left some suggestions and feedback below. Overall this is looking very good though! 💯

test/e2e/specs/editor/blocks/cover.spec.js

- add comment explaining the use of `span[aria-hidden="true"]`.

…esizing the block.

kevin940726

Looking great! Just a small suggestion and I think we're good to go! Thank you so much for the hard work! 🙇

kevin940726 · 2023-05-11T10:48:26Z

test/e2e/specs/editor/blocks/cover.spec.js

+	} );
+} );
+
+class ImageBlockUtils {


Maybe we should name it CoverBlockUtils? 😆

Makes sense. I thought maybe ImageBlockUtils was always used as the name for the POM class, for some reason.

Name changed to CoverBlockUtils in 405c709.

kevin940726

Thanks again! 💯

@worldomonation This is really well done! I couldn't have done it better myself! Also congrats on your first merged PR!

github-actions · 2023-05-15T08:21:45Z

Congratulations on your first merged pull request, @worldomonation! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!

worldomonation · 2023-05-16T02:30:45Z

Thanks again! 💯

@worldomonation This is really well done! I couldn't have done it better myself! Also congrats on your first merged PR!

Thanks @kevin940726 for the many rounds of review. I really enjoyed working on this and would love to pick up a few more in the coming weeks! Thank you again.

github-actions bot added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Nov 15, 2022

worldomonation marked this pull request as ready for review November 15, 2022 20:52

worldomonation requested review from ntwb, nerrad and ajitbohra as code owners November 15, 2022 20:52

worldomonation commented Nov 15, 2022

View reviewed changes

test/e2e/specs/editor/blocks/cover.spec.js Outdated Show resolved Hide resolved

Mamaduka added the [Type] Automated Testing Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests. label Nov 16, 2022

noisysocks requested a review from kevin940726 November 20, 2022 22:58

t-hamano mentioned this pull request Dec 13, 2022

Migrate E2E tests to Playwright #38851

Closed

worldomonation added 3 commits April 24, 2023 16:30

Add new Playwright E2E tests for the cover block.

12053c5

Add comment

4ad16be

Update block list selector

ff1b3c3

test/e2e/specs/editor/blocks/cover.spec.js

1594c2d

- update spec with accessibility-based selectors where possible.

worldomonation added 2 commits April 27, 2023 17:26

test/e2e/specs/editor/blocks/cover.spec.js

2a496d1

- rebase, rebuild and update the selectors

packages/e2e-tests/specs/editor/blocks/cover.test.js

e409acf

- remove Puppeteer file.

worldomonation commented Apr 27, 2023

View reviewed changes

test/e2e/specs/editor/blocks/cover.spec.js Show resolved Hide resolved

test/e2e/specs/editor/blocks/cover.spec.js

c154640

- clarify use of `span` element in the first spec.

kevin940726 reviewed Apr 27, 2023

View reviewed changes

worldomonation added 3 commits May 10, 2023 12:29

- add comment explaing use of CSS selector for '.components-resizable…

071c31b

…-box__handle-bottom'. - move image upload and filename methods previously handled by `getTestImage` into a POM-like function at bottom of file.

- remove testing test.only

77a1b7b

worldomonation requested a review from kevin940726 May 10, 2023 07:30

kevin940726 reviewed May 10, 2023

View reviewed changes

worldomonation added 6 commits May 10, 2023 18:15

- fix the import to use import.

d6a4f44

- add comment explaining the use of `span[aria-hidden="true"]`.

- anchor selectors on a parent selector.

b6e5c29

- use the Cover block's resize handle as basis for calculation when r…

8b19caf

…esizing the block.

- remove testing "only"

f756ede

- check the src repeatedly to contain the fileBasename instead.

aadc65d

- move getBackgroundColorAndOpacity into the ImageBlockUtils POM.

7897f28

kevin940726 approved these changes May 11, 2023

View reviewed changes

Rename POM to CoverBlockUtils

405c709

kevin940726 approved these changes May 15, 2023

View reviewed changes

kevin940726 merged commit 9e6b646 into WordPress:trunk May 15, 2023

github-actions bot added this to the Gutenberg 15.9 milestone May 15, 2023

worldomonation deleted the add/playwright-cover-block-e2e branch May 16, 2023 02:41

worldomonation mentioned this pull request May 16, 2023

E2E: refactor Support specs into one flow. Automattic/wp-calypso#76960

Merged

10 tasks

cbravobernal added the [Type] Code Quality Issues or PRs that relate to code quality label May 24, 2023

worldomonation mentioned this pull request Jun 27, 2023

Permafail E2E: fix Notifications spec. Automattic/wp-calypso#78616

Merged

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrate Cover Block tests to Playwright #45784

Migrate Cover Block tests to Playwright #45784

worldomonation commented Nov 15, 2022 •

edited

Loading

codesandbox bot commented Nov 15, 2022

github-actions bot commented Nov 15, 2022

worldomonation commented Nov 15, 2022

worldomonation commented Nov 15, 2022

kevin940726 commented Jan 2, 2023

worldomonation commented Apr 26, 2023 •

edited

Loading

kevin940726 commented Apr 26, 2023

worldomonation commented Apr 26, 2023

kevin940726 commented Apr 27, 2023

worldomonation commented Apr 27, 2023

kevin940726 commented Apr 27, 2023

worldomonation commented Apr 27, 2023

worldomonation commented May 10, 2023

kevin940726 left a comment

kevin940726 left a comment

kevin940726 May 11, 2023

worldomonation May 12, 2023

worldomonation May 12, 2023

kevin940726 left a comment •

edited

Loading

github-actions bot commented May 15, 2023

worldomonation commented May 16, 2023

Migrate Cover Block tests to Playwright #45784

Migrate Cover Block tests to Playwright #45784

Conversation

worldomonation commented Nov 15, 2022 • edited Loading

What?

Why?

How?

Testing Instructions

Screenshots or screencast

codesandbox bot commented Nov 15, 2022

github-actions bot commented Nov 15, 2022

worldomonation commented Nov 15, 2022

worldomonation commented Nov 15, 2022

kevin940726 commented Jan 2, 2023

worldomonation commented Apr 26, 2023 • edited Loading

kevin940726 commented Apr 26, 2023

worldomonation commented Apr 26, 2023

kevin940726 commented Apr 27, 2023

worldomonation commented Apr 27, 2023

kevin940726 commented Apr 27, 2023

worldomonation commented Apr 27, 2023

worldomonation commented May 10, 2023

kevin940726 left a comment

Choose a reason for hiding this comment

kevin940726 left a comment

Choose a reason for hiding this comment

kevin940726 May 11, 2023

Choose a reason for hiding this comment

worldomonation May 12, 2023

Choose a reason for hiding this comment

worldomonation May 12, 2023

Choose a reason for hiding this comment

kevin940726 left a comment • edited Loading

Choose a reason for hiding this comment

github-actions bot commented May 15, 2023

worldomonation commented May 16, 2023

worldomonation commented Nov 15, 2022 •

edited

Loading

worldomonation commented Apr 26, 2023 •

edited

Loading

kevin940726 left a comment •

edited

Loading