{"id":210,"date":"2023-11-05T13:59:56","date_gmt":"2023-11-05T13:59:56","guid":{"rendered":"https:\/\/aki-hamano.blog\/?p=210"},"modified":"2025-10-25T03:53:41","modified_gmt":"2025-10-25T03:53:41","slug":"block-e2e","status":"publish","type":"post","link":"https:\/\/aki-hamano.blog\/en\/2023\/11\/05\/block-e2e\/","title":{"rendered":"Introducing e2e testing to WordPress block development"},"content":{"rendered":"\n

Introduction<\/h2>\n\n\n\n

Playwright is now supported in @wordpress\/scripts<\/code> version 26.13.0. In this article, I will introduce a simple way to implement E2E testing using Playwright in block development.<\/p>\n\n\n\n

Notes<\/h2>\n\n\n\n

This article is based on version 26.16.0 of @wordpress\/scripts<\/code>. If the version is between 26.13.0 and 26.15.0, please see the \u201c(Supplementary) Preparing the config file<\/a>\u201d section.<\/p>\n\n\n\n

Create a block template<\/h2>\n\n\n\n

Use @wordpress\/create-block<\/code> to create a plugin template with one block. At the same time, add thewp-env<\/code> option so that you can also launch the local environment.<\/p>\n\n\n\n

npx @wordpress\/create-block playwright-test --wp-env<\/code><\/pre>\n\n\n\n
Starting the local environment.<\/p>\n\n\n\n
npm run env start<\/code><\/pre>\n\n\n\n
First of all, let\u2019s confirm that we can insert the block.<\/p>\n\n\n\n
\"Block<\/figure>\n\n\n\n
By default only fixed text is displayed, so make the text inside editable.<\/p>\n\n\n\n
{\n  ...\n  \"attributes\": {\n    \"content\": {\n      \"type\": \"string\",\n      \"source\": \"html\",\n      \"selector\": \"p\"\n    }\n  },\n  ...\n}<\/code><\/pre>\n\n\n\n
import {\n  RichText,\n  useBlockProps,\n} from '@wordpress\/block-editor';\n\nexport default function Edit( { attributes, setAttributes } ) {\n  const { content } = attributes;\n  return (\n    <RichText\n      tagName=\"p\"\n      { ...useBlockProps() }\n      value={ content }\n      onChange={ ( newContent ) =>\n         setAttributes( { content: newContent } )\n      }\n    \/>\n  );\n}<\/code><\/pre>\n\n\n\n
import { RichText, useBlockProps } from '@wordpress\/block-editor';\n\nexport default function save( { attributes } ) {\n  const { content } = attributes;\n  return (\n    <p { ...useBlockProps.save() }>\n      <RichText.Content value={ content } \/>\n    <\/p>\n  );\n}<\/code><\/pre>\n\n\n\n
Let\u2019s try building the block again. You should now be able to edit and save the text of the inserted block.<\/p>\n\n\n\n
npm run build<\/code><\/pre>\n\n\n\n
Preparing for Playwright<\/h2>\n\n\n\n
When you install the latest @wordpress\/scripts<\/code>, the necessary libraries are included in the dependencies, so there is no need to install any new npm packages.<\/p>\n\n\n\n
$ npm ls @playwright\/test\nplaywright-test@0.1.0 \/home\/username\/projects\/playwright-test\n\u2514\u2500\u252c @wordpress\/scripts@26.16.0\n  \u251c\u2500\u2500 @playwright\/test@1.39.0\n  \u2514\u2500\u252c @wordpress\/e2e-test-utils-playwright@0.13.0\n    \u2514\u2500\u2500 @playwright\/test@1.39.0 deduped<\/code><\/pre>\n\n\n\n
$ npm ls @wordpress\/e2e-test-utils-playwright\nplaywright-test@0.1.0 \/home\/wildworks\/projects\/playwright-test\n\u2514\u2500\u252c @wordpress\/scripts@26.16.0\n  \u2514\u2500\u2500 @wordpress\/e2e-test-utils-playwright@0.13.0<\/code><\/pre>\n\n\n\n
Add scripts to run e2e tests<\/p>\n\n\n\n
{\n  ...\n  \"scripts\": {\n    \"test:e2e\": \"wp-scripts test-playwright\",\n    \"test:e2e:debug\": \"wp-scripts test-playwright --debug\"\n  }\n  ...\n}<\/code><\/pre>\n\n\n\n
@wordpress\/scripts<\/code> has the default config file for Playwright<\/a>, so it\u2019s ready to run e2e tests.<\/p>\n\n\n\n
Note: If the version of @wordpress\/scripts<\/code> is between 26.13.0 and 26.15.0, please see the \u201c(Supplementary) Preparing the config file<\/a>\u201d section.<\/p>\n\n\n\n
There is no test file yet, let\u2019s try running the e2e test using Playwright.<\/p>\n\n\n\n
npm run test:e2e\n\n> playwright-test@0.1.0 test:e2e\n> wp-scripts test-playwright\nError: No tests found<\/code><\/pre>\n\n\n\n
Although you got a message that the test could not be found, you were able to confirm that it worked without any errors.<\/p>\n\n\n\n
Here, in order to try overwriting the default configuration file, we will change the directory referenced by the tests from the default specs<\/code> to the tests\/e2e<\/code> directory.<\/p>\n\n\n\n
import { defineConfig } from '@playwright\/test';\n\nconst baseConfig = require( '@wordpress\/scripts\/config\/playwright.config.js' );\nconst config = defineConfig( {\n  ...baseConfig,\n  testDir: '.\/tests\/e2e',\n} );\nexport default config;<\/code><\/pre>\n\n\n\n
Writing a test<\/h2>\n\n\n\n
Let\u2019s actually write a simple test. First, we are confirming that the custom block is inserted properly without errors.<\/p>\n\n\n\n
import { test, expect } from '@wordpress\/e2e-test-utils-playwright';\n\ntest.describe( 'Block', () => {\n  test.beforeEach( async ( { admin } ) => {\n    \/\/ Create a new post before each test\n    await admin.createNewPost();\n  } );\n\n  test( 'should be created', async ( { editor } ) => {\n    \/\/ Insert a block\n    await editor.insertBlock( { name: 'create-block\/playwright-test' } );\n    \/\/ Test that post content matches snapshot\n    expect( await editor.getEditedPostContent() ).toMatchSnapshot();\n  } );\n} );<\/code><\/pre>\n\n\n\n
Run e2e tests.<\/p>\n\n\n\n
npm run test:e2e<\/code><\/pre>\n\n\n\n
The first time you run it, there is no snapshot, so it should fail with an error like the one below:<\/p>\n\n\n\n
Error: A snapshot doesn't exist at \/home\/username\/projects\/playwright-test\/tests\/e2e\/__snapshots__\/Block-should-be-created-1-chromium.txt, writing actual.<\/code><\/pre>\n\n\n\n
Instead, a snapshot is created with the following contents: This snapshot shows that the custom block has been properly inserted, so it is the snapshot we expected.<\/p>\n\n\n\n
tests\/e2e\/__snapshots__\/Block-should-be-created-1-chromium.txt<\/code><\/p>\n\n\n\n
<!-- wp:create-block\/playwright-test -->\n<p class=\"wp-block-create-block-playwright-test\"><\/p>\n<!-- \/wp:create-block\/playwright-test --><\/code><\/pre>\n\n\n\n
Run the e2e test again.<\/p>\n\n\n\n
npm run test:e2e<\/code><\/pre>\n\n\n\n
The test should now pass.<\/p>\n\n\n\n
> playwright-test@0.1.0 test:e2e\n> wp-scripts test-playwright\n\nRunning 1 test using 1 worker\n  \u2713  1 [chromium] \u203a test.spec.js:9:6 \u203a Block \u203a should be created (2.2s)\n  1 passed (3.1s)<\/code><\/pre>\n\n\n\n
Debugging the test<\/h2>\n\n\n\n
Try running the test in debug mode. This is useful when writing complex tests and tracing whether operations are performed as expected.<\/p>\n\n\n\n
npm run test:e2e:debug<\/code><\/pre>\n\n\n\n
Two windows should appear as shown below. Click once on the step-over button in the smaller window.<\/p>\n\n\n\n
\"Debugging<\/figure>\n\n\n\n
Every time you press the Step Over button, you will see the test procedure execute as expected.<\/p>\n\n\n\n
Writing additional test<\/h2>\n\n\n\n
Since the text in this custom block is editable, so we will write a test to check whether the changed text is reflected correctly.<\/p>\n\n\n\n
test.describe( 'Block', () => {\n  \/\/ ...\n\n  test( 'should be updated the content', async ( { editor, page } ) => {\n    \/\/ Insert a block\n    await editor.insertBlock( { name: 'create-block\/playwright-test' } );\n    \/\/ Update the text inside the block\n    await page.keyboard.type( 'Hello World!' );\n    \/\/ Test that post content matches snapshot\n    expect( await editor.getEditedPostContent() ).toMatchSnapshot();\n  } );\n} );<\/code><\/pre>\n\n\n\n
The second new test fails and creates a snapshot, but it should be the snapshot you expected.<\/p>\n\n\n\n
<!-- wp:create-block\/playwright-test -->\n<p class=\"wp-block-create-block-playwright-test\">Hello World!<\/p>\n<!-- \/wp:create-block\/playwright-test --><\/code><\/pre>\n\n\n\n
At the end<\/h2>\n\n\n\n
With @wordpres\/scripts<\/code> supporting Playwright, I think it has become easier to perform e2e testing in block development. Also, @wordpress\/e2e-test-utils-playwright<\/code> has many useful utilities. For a concrete usage example, you can take a look at the e2e test for the Gutenberg project.<\/p>\n\n\n\n