@wordpress/e2e-tests 7.5.0 → 7.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/config/setup-test-framework.js +9 -0
  3. package/mu-plugins/nocache-headers.php +21 -0
  4. package/package.json +7 -7
  5. package/plugins/block-context.php +1 -1
  6. package/plugins/iframed-block/block.json +1 -1
  7. package/plugins/iframed-block.php +2 -2
  8. package/plugins/iframed-enqueue-block-assets.php +1 -1
  9. package/plugins/iframed-inline-styles/block.json +1 -1
  10. package/plugins/iframed-inline-styles/editor.js +1 -1
  11. package/plugins/iframed-inline-styles.php +3 -3
  12. package/plugins/iframed-masonry-block/block.json +1 -1
  13. package/plugins/iframed-masonry-block/editor.js +1 -1
  14. package/plugins/iframed-masonry-block.php +2 -2
  15. package/plugins/iframed-multiple-stylesheets/block.json +1 -1
  16. package/plugins/iframed-multiple-stylesheets/editor.js +1 -1
  17. package/plugins/iframed-multiple-stylesheets.php +2 -2
  18. package/plugins/inner-blocks-allowed-blocks/index.js +17 -58
  19. package/plugins/inner-blocks-allowed-blocks.php +2 -3
  20. package/plugins/marquee-function-widget.php +2 -2
  21. package/specs/editor/blocks/post-title.test.js +5 -4
  22. package/specs/editor/blocks/site-title.test.js +3 -2
  23. package/specs/editor/plugins/annotations.test.js +17 -9
  24. package/specs/editor/plugins/block-variations.test.js +6 -5
  25. package/specs/editor/plugins/cpt-locking.test.js +15 -12
  26. package/specs/editor/plugins/iframed-inline-styles.test.js +6 -2
  27. package/specs/editor/plugins/iframed-masonry-block.test.js +1 -1
  28. package/specs/editor/plugins/iframed-multiple-block-stylesheets.test.js +1 -1
  29. package/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js +2 -1
  30. package/specs/editor/various/__snapshots__/links.test.js.snap +0 -24
  31. package/specs/editor/various/adding-inline-tokens.test.js +0 -1
  32. package/specs/editor/various/autosave.test.js +2 -1
  33. package/specs/editor/various/block-editor-keyboard-shortcuts.test.js +4 -3
  34. package/specs/editor/various/block-grouping.test.js +5 -4
  35. package/specs/editor/various/change-detection.test.js +20 -19
  36. package/specs/editor/various/editor-modes.test.js +7 -6
  37. package/specs/editor/various/embedding.test.js +21 -15
  38. package/specs/editor/various/inserting-blocks.test.js +19 -14
  39. package/specs/editor/various/invalid-block.test.js +4 -6
  40. package/specs/editor/various/keyboard-navigable-blocks.test.js +16 -17
  41. package/specs/editor/various/links.test.js +26 -152
  42. package/specs/editor/various/nux.test.js +6 -2
  43. package/specs/editor/various/publish-button.test.js +3 -2
  44. package/specs/editor/various/publish-panel.test.js +4 -3
  45. package/specs/editor/various/publishing.test.js +9 -5
  46. package/specs/editor/various/reusable-blocks.test.js +39 -25
  47. package/specs/editor/various/rich-text.test.js +9 -8
  48. package/specs/editor/various/sidebar-permalink.test.js +4 -3
  49. package/specs/editor/various/taxonomies.test.js +4 -3
  50. package/specs/editor/various/typewriter.test.js +68 -50
  51. package/specs/performance/front-end-block-theme.test.js +1 -2
  52. package/specs/performance/front-end-classic-theme.test.js +1 -1
  53. package/specs/performance/post-editor.test.js +6 -0
  54. package/specs/performance/site-editor.test.js +11 -7
  55. package/specs/site-editor/settings-sidebar.test.js +2 -2
  56. package/specs/editor/plugins/inner-blocks-allowed-blocks.test.js +0 -96
  57. package/specs/editor/various/__snapshots__/block-hierarchy-navigation.test.js.snap +0 -63
  58. package/specs/editor/various/block-hierarchy-navigation.test.js +0 -227
  59. package/specs/editor/various/navigable-toolbar.test.js +0 -104
package/CHANGELOG.md CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 7.6.0 (2023-06-07)
6
+
5
7
  ## 7.5.0 (2023-05-24)
6
8
 
7
9
  ## 7.4.0 (2023-05-10)
@@ -158,6 +158,15 @@ function observeConsoleLogging() {
158
158
  return;
159
159
  }
160
160
 
161
+ // Ignore framer-motion warnings about reduced motion.
162
+ if (
163
+ text.includes(
164
+ 'You have Reduced Motion enabled on your device. Animations may not appear as expected.'
165
+ )
166
+ ) {
167
+ return;
168
+ }
169
+
161
170
  const logFunction = OBSERVED_CONSOLE_MESSAGE_TYPES[ type ];
162
171
 
163
172
  // As of Puppeteer 1.6.1, `message.text()` wrongly returns an object of
@@ -0,0 +1,21 @@
1
+ <?php
2
+ /**
3
+ * Plugin Name: Gutenberg Test Plugin, No-cache Headers
4
+ * Plugin URI: https://github.com/WordPress/gutenberg
5
+ * Author: Gutenberg Team
6
+ *
7
+ * @package gutenberg-test-nocache-headers
8
+ */
9
+
10
+ // Remove 'no-store' from the Cache-Control header set by WordPress when running
11
+ // E2E tests. This is a workaround for an issue where E2E tests time out waiting
12
+ // for 'networkidle'.
13
+ add_filter(
14
+ 'nocache_headers',
15
+ static function( $headers ) {
16
+ $cache_control_parts = explode( ', ', $headers['Cache-Control'] );
17
+ $cache_control_parts = array_diff( $cache_control_parts, array( 'no-store' ) );
18
+ $headers['Cache-Control'] = implode( ', ', $cache_control_parts );
19
+ return $headers;
20
+ }
21
+ );
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/e2e-tests",
3
- "version": "7.5.0",
3
+ "version": "7.6.1",
4
4
  "description": "End-To-End (E2E) tests for WordPress.",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -23,11 +23,11 @@
23
23
  "node": ">=14"
24
24
  },
25
25
  "dependencies": {
26
- "@wordpress/e2e-test-utils": "^10.5.0",
27
- "@wordpress/jest-console": "^7.5.0",
28
- "@wordpress/jest-puppeteer-axe": "^6.5.0",
29
- "@wordpress/scripts": "^26.5.0",
30
- "@wordpress/url": "^3.35.0",
26
+ "@wordpress/e2e-test-utils": "^10.6.1",
27
+ "@wordpress/jest-console": "^7.6.1",
28
+ "@wordpress/jest-puppeteer-axe": "^6.6.1",
29
+ "@wordpress/scripts": "^26.6.1",
30
+ "@wordpress/url": "^3.36.1",
31
31
  "chalk": "^4.0.0",
32
32
  "expect-puppeteer": "^4.4.0",
33
33
  "filenamify": "^4.2.0",
@@ -45,5 +45,5 @@
45
45
  "publishConfig": {
46
46
  "access": "public"
47
47
  },
48
- "gitHead": "c7c79cb11b677adcbf06cf5f8cfb6c5ec1699f19"
48
+ "gitHead": "ce5639111c30763dbdf07f40eeb136ea6030ecf1"
49
49
  }
@@ -52,7 +52,7 @@ function gutenberg_test_register_context_blocks() {
52
52
  'postId',
53
53
  'postType',
54
54
  ),
55
- 'render_callback' => function( $attributes, $content, $block ) {
55
+ 'render_callback' => static function( $attributes, $content, $block ) {
56
56
  $ordered_context = array(
57
57
  $block->context['gutenberg/recordId'],
58
58
  $block->context['postId'],
@@ -1,5 +1,5 @@
1
1
  {
2
- "apiVersion": 2,
2
+ "apiVersion": 3,
3
3
  "name": "test/iframed-block",
4
4
  "title": "Iframed Block",
5
5
  "category": "text",
@@ -9,14 +9,14 @@
9
9
 
10
10
  add_action(
11
11
  'setup_theme',
12
- function() {
12
+ static function() {
13
13
  add_theme_support( 'block-templates' );
14
14
  }
15
15
  );
16
16
 
17
17
  add_action(
18
18
  'init',
19
- function() {
19
+ static function() {
20
20
  wp_register_script(
21
21
  'iframed-block-jquery-test',
22
22
  plugin_dir_url( __FILE__ ) . 'iframed-block/jquery.test.js',
@@ -9,7 +9,7 @@
9
9
 
10
10
  add_action(
11
11
  'enqueue_block_assets',
12
- function() {
12
+ static function() {
13
13
  wp_enqueue_style(
14
14
  'iframed-enqueue-block-assets',
15
15
  plugin_dir_url( __FILE__ ) . 'iframed-enqueue-block-assets/style.css',
@@ -1,5 +1,5 @@
1
1
  {
2
- "apiVersion": 2,
2
+ "apiVersion": 3,
3
3
  "name": "test/iframed-inline-styles",
4
4
  "title": "Iframed Inline Styles",
5
5
  "category": "text",
@@ -4,7 +4,7 @@
4
4
  const { useBlockProps } = blockEditor;
5
5
 
6
6
  registerBlockType( 'test/iframed-inline-styles', {
7
- apiVersion: 2,
7
+ apiVersion: 3,
8
8
  edit: function Edit() {
9
9
  return el( 'div', useBlockProps(), 'Edit' );
10
10
  },
@@ -9,14 +9,14 @@
9
9
 
10
10
  add_action(
11
11
  'setup_theme',
12
- function() {
12
+ static function() {
13
13
  add_theme_support( 'block-templates' );
14
14
  }
15
15
  );
16
16
 
17
17
  add_action(
18
18
  'init',
19
- function() {
19
+ static function() {
20
20
  wp_register_script(
21
21
  'iframed-inline-styles-editor-script',
22
22
  plugin_dir_url( __FILE__ ) . 'iframed-inline-styles/editor.js',
@@ -40,7 +40,7 @@ add_action(
40
40
 
41
41
  add_action(
42
42
  'enqueue_block_editor_assets',
43
- function() {
43
+ static function() {
44
44
  wp_enqueue_style(
45
45
  'iframed-inline-styles-compat-style',
46
46
  plugin_dir_url( __FILE__ ) . 'iframed-inline-styles/compat-style.css',
@@ -1,5 +1,5 @@
1
1
  {
2
- "apiVersion": 2,
2
+ "apiVersion": 3,
3
3
  "name": "test/iframed-masonry-block",
4
4
  "title": "Iframed Masonry Block",
5
5
  "category": "text",
@@ -31,7 +31,7 @@
31
31
  ];
32
32
 
33
33
  registerBlockType( 'test/iframed-masonry-block', {
34
- apiVersion: 2,
34
+ apiVersion: 3,
35
35
  edit: function Edit() {
36
36
  const ref = useRefEffect( ( node ) => {
37
37
  const { ownerDocument } = node;
@@ -9,14 +9,14 @@
9
9
 
10
10
  add_action(
11
11
  'setup_theme',
12
- function() {
12
+ static function() {
13
13
  add_theme_support( 'block-templates' );
14
14
  }
15
15
  );
16
16
 
17
17
  add_action(
18
18
  'init',
19
- function() {
19
+ static function() {
20
20
  wp_register_script(
21
21
  'iframed-masonry-block-editor',
22
22
  plugin_dir_url( __FILE__ ) . 'iframed-masonry-block/editor.js',
@@ -1,5 +1,5 @@
1
1
  {
2
- "apiVersion": 2,
2
+ "apiVersion": 3,
3
3
  "name": "test/iframed-multiple-stylesheets",
4
4
  "title": "Iframed Multiple Stylesheets",
5
5
  "category": "text",
@@ -4,7 +4,7 @@
4
4
  const { useBlockProps } = blockEditor;
5
5
 
6
6
  registerBlockType( 'test/iframed-multiple-stylesheets', {
7
- apiVersion: 2,
7
+ apiVersion: 3,
8
8
  edit: function Edit() {
9
9
  return el( 'div', useBlockProps(), 'Edit' );
10
10
  },
@@ -9,14 +9,14 @@
9
9
 
10
10
  add_action(
11
11
  'setup_theme',
12
- function() {
12
+ static function() {
13
13
  add_theme_support( 'block-templates' );
14
14
  }
15
15
  );
16
16
 
17
17
  add_action(
18
18
  'init',
19
- function() {
19
+ static function() {
20
20
  wp_register_script(
21
21
  'iframed-multiple-stylesheets-editor-script',
22
22
  plugin_dir_url( __FILE__ ) . 'iframed-multiple-stylesheets/editor.js',
@@ -1,87 +1,46 @@
1
1
  ( function () {
2
- const { withSelect } = wp.data;
2
+ const { useSelect } = wp.data;
3
3
  const { registerBlockType } = wp.blocks;
4
4
  const { createElement: el } = wp.element;
5
5
  const { InnerBlocks } = wp.blockEditor;
6
- const __ = wp.i18n.__;
7
6
  const divProps = {
8
7
  className: 'product',
9
8
  style: { outline: '1px solid gray', padding: 5 },
10
9
  };
11
- const template = [
12
- [ 'core/image' ],
13
- [ 'core/paragraph', { placeholder: __( 'Add a description' ) } ],
14
- [ 'core/quote' ],
15
- ];
10
+
16
11
  const allowedBlocksWhenSingleEmptyChild = [ 'core/image', 'core/list' ];
17
12
  const allowedBlocksWhenMultipleChildren = [ 'core/gallery', 'core/video' ];
18
13
 
19
- const save = function () {
20
- return el( 'div', divProps, el( InnerBlocks.Content ) );
21
- };
22
- registerBlockType( 'test/allowed-blocks-unset', {
23
- title: 'Allowed Blocks Unset',
24
- icon: 'carrot',
25
- category: 'text',
26
-
27
- edit() {
28
- return el( 'div', divProps, el( InnerBlocks, { template } ) );
29
- },
30
-
31
- save,
32
- } );
33
-
34
- registerBlockType( 'test/allowed-blocks-set', {
35
- title: 'Allowed Blocks Set',
36
- icon: 'carrot',
37
- category: 'text',
38
-
39
- edit() {
40
- return el(
41
- 'div',
42
- divProps,
43
- el( InnerBlocks, {
44
- template,
45
- allowedBlocks: [
46
- 'core/button',
47
- 'core/gallery',
48
- 'core/list',
49
- 'core/media-text',
50
- 'core/quote',
51
- ],
52
- } )
53
- );
54
- },
55
-
56
- save,
57
- } );
58
-
59
14
  registerBlockType( 'test/allowed-blocks-dynamic', {
60
15
  title: 'Allowed Blocks Dynamic',
61
16
  icon: 'carrot',
62
17
  category: 'text',
63
18
 
64
- edit: withSelect( function ( select, ownProps ) {
65
- const getBlockOrder = select( 'core/block-editor' ).getBlockOrder;
66
- return {
67
- numberOfChildren: getBlockOrder( ownProps.clientId ).length,
68
- };
69
- } )( function ( props ) {
19
+ edit: function Edit( props ) {
20
+ const numberOfChildren = useSelect(
21
+ ( select ) => {
22
+ const { getBlockCount } = select( 'core/block-editor' );
23
+ return getBlockCount( props.clientId );
24
+ },
25
+ [ props.clientId ]
26
+ );
27
+
70
28
  return el(
71
29
  'div',
72
30
  {
73
31
  ...divProps,
74
- 'data-number-of-children': props.numberOfChildren,
32
+ 'data-number-of-children': numberOfChildren,
75
33
  },
76
34
  el( InnerBlocks, {
77
35
  allowedBlocks:
78
- props.numberOfChildren < 2
36
+ numberOfChildren < 2
79
37
  ? allowedBlocksWhenSingleEmptyChild
80
38
  : allowedBlocksWhenMultipleChildren,
81
39
  } )
82
40
  );
83
- } ),
84
-
85
- save,
41
+ },
42
+ save() {
43
+ return el( 'div', divProps, el( InnerBlocks.Content ) );
44
+ }
86
45
  } );
87
46
  } )();
@@ -12,7 +12,7 @@
12
12
  */
13
13
  function enqueue_inner_blocks_allowed_blocks_script() {
14
14
  wp_enqueue_script(
15
- 'gutenberg-test-block-icons',
15
+ 'gutenberg-test-inner-blocks-allowed-blocks',
16
16
  plugins_url( 'inner-blocks-allowed-blocks/index.js', __FILE__ ),
17
17
  array(
18
18
  'wp-blocks',
@@ -24,5 +24,4 @@ function enqueue_inner_blocks_allowed_blocks_script() {
24
24
  true
25
25
  );
26
26
  }
27
-
28
- add_action( 'init', 'enqueue_inner_blocks_allowed_blocks_script' );
27
+ add_action( 'enqueue_block_assets', 'enqueue_inner_blocks_allowed_blocks_script' );
@@ -14,7 +14,7 @@ function marquee_greeting_init() {
14
14
  wp_register_sidebar_widget(
15
15
  'marquee_greeting',
16
16
  'Marquee Greeting',
17
- function() {
17
+ static function() {
18
18
  $greeting = get_option( 'marquee_greeting', 'Hello!' );
19
19
  printf( '<marquee>%s</marquee>', esc_html( $greeting ) );
20
20
  }
@@ -23,7 +23,7 @@ function marquee_greeting_init() {
23
23
  wp_register_widget_control(
24
24
  'marquee_greeting',
25
25
  'Marquee Greeting',
26
- function() {
26
+ static function() {
27
27
  if ( isset( $_POST['marquee-greeting'] ) ) {
28
28
  update_option(
29
29
  'marquee_greeting',
@@ -5,6 +5,7 @@ import {
5
5
  createNewPost,
6
6
  insertBlock,
7
7
  saveDraft,
8
+ canvas,
8
9
  } from '@wordpress/e2e-test-utils';
9
10
 
10
11
  describe( 'Post Title block', () => {
@@ -14,11 +15,11 @@ describe( 'Post Title block', () => {
14
15
 
15
16
  it( 'Can edit the post title', async () => {
16
17
  // Create a block with some text that will trigger a list creation.
17
- await insertBlock( 'Post Title' );
18
+ await insertBlock( 'Title' );
18
19
  const editablePostTitleSelector =
19
20
  '.wp-block-post-title[contenteditable="true"]';
20
- await page.waitForSelector( editablePostTitleSelector );
21
- await page.focus( editablePostTitleSelector );
21
+ await canvas().waitForSelector( editablePostTitleSelector );
22
+ await canvas().focus( editablePostTitleSelector );
22
23
 
23
24
  // Create a second list item.
24
25
  await page.keyboard.type( 'Just tweaking the post title' );
@@ -26,7 +27,7 @@ describe( 'Post Title block', () => {
26
27
  await saveDraft();
27
28
  await page.reload();
28
29
  await page.waitForSelector( '.edit-post-layout' );
29
- const title = await page.$eval(
30
+ const title = await canvas().$eval(
30
31
  '.editor-post-title__input',
31
32
  ( element ) => element.textContent
32
33
  );
@@ -9,6 +9,7 @@ import {
9
9
  pressKeyWithModifier,
10
10
  setOption,
11
11
  openDocumentSettingsSidebar,
12
+ canvas,
12
13
  } from '@wordpress/e2e-test-utils';
13
14
 
14
15
  const saveEntities = async () => {
@@ -45,8 +46,8 @@ describe( 'Site Title block', () => {
45
46
  await insertBlock( 'Site Title' );
46
47
  const editableSiteTitleSelector =
47
48
  '[aria-label="Block: Site Title"] a[contenteditable="true"]';
48
- await page.waitForSelector( editableSiteTitleSelector );
49
- await page.focus( editableSiteTitleSelector );
49
+ await canvas().waitForSelector( editableSiteTitleSelector );
50
+ await canvas().focus( editableSiteTitleSelector );
50
51
  await pressKeyWithModifier( 'primary', 'a' );
51
52
 
52
53
  await page.keyboard.type( 'New Site Title' );
@@ -8,6 +8,7 @@ import {
8
8
  clickOnMoreMenuItem,
9
9
  createNewPost,
10
10
  deactivatePlugin,
11
+ canvas,
11
12
  } from '@wordpress/e2e-test-utils';
12
13
 
13
14
  const clickOnBlockSettingsMenuItem = async ( buttonLabel ) => {
@@ -28,6 +29,13 @@ describe( 'Annotations', () => {
28
29
 
29
30
  beforeEach( async () => {
30
31
  await createNewPost();
32
+ // To do: run with iframe.
33
+ await page.evaluate( () => {
34
+ window.wp.blocks.registerBlockType( 'test/v2', {
35
+ apiVersion: '2',
36
+ title: 'test',
37
+ } );
38
+ } );
31
39
  } );
32
40
 
33
41
  /**
@@ -51,7 +59,7 @@ describe( 'Annotations', () => {
51
59
  await page.$x( "//button[contains(text(), 'Add annotation')]" )
52
60
  )[ 0 ];
53
61
  await addAnnotationButton.click();
54
- await page.evaluate( () =>
62
+ await canvas().evaluate( () =>
55
63
  document.querySelector( '.wp-block-paragraph' ).focus()
56
64
  );
57
65
  }
@@ -67,7 +75,7 @@ describe( 'Annotations', () => {
67
75
  await page.$x( "//button[contains(text(), 'Remove annotations')]" )
68
76
  )[ 0 ];
69
77
  await addAnnotationButton.click();
70
- await page.evaluate( () =>
78
+ await canvas().evaluate( () =>
71
79
  document.querySelector( '[contenteditable]' ).focus()
72
80
  );
73
81
  }
@@ -78,11 +86,11 @@ describe( 'Annotations', () => {
78
86
  * @return {Promise<string>} The annotated text.
79
87
  */
80
88
  async function getAnnotatedText() {
81
- const annotations = await page.$$( ANNOTATIONS_SELECTOR );
89
+ const annotations = await canvas().$$( ANNOTATIONS_SELECTOR );
82
90
 
83
91
  const annotation = annotations[ 0 ];
84
92
 
85
- return await page.evaluate( ( el ) => el.innerText, annotation );
93
+ return await canvas().evaluate( ( el ) => el.innerText, annotation );
86
94
  }
87
95
 
88
96
  /**
@@ -91,7 +99,7 @@ describe( 'Annotations', () => {
91
99
  * @return {Promise<string>} Inner HTML.
92
100
  */
93
101
  async function getRichTextInnerHTML() {
94
- const htmlContent = await page.$$( '.wp-block-paragraph' );
102
+ const htmlContent = await canvas().$$( '.wp-block-paragraph' );
95
103
  return await page.evaluate( ( el ) => {
96
104
  return el.innerHTML;
97
105
  }, htmlContent[ 0 ] );
@@ -102,12 +110,12 @@ describe( 'Annotations', () => {
102
110
 
103
111
  await clickOnMoreMenuItem( 'Annotations' );
104
112
 
105
- let annotations = await page.$$( ANNOTATIONS_SELECTOR );
113
+ let annotations = await canvas().$$( ANNOTATIONS_SELECTOR );
106
114
  expect( annotations ).toHaveLength( 0 );
107
115
 
108
116
  await annotateFirstBlock( 9, 13 );
109
117
 
110
- annotations = await page.$$( ANNOTATIONS_SELECTOR );
118
+ annotations = await canvas().$$( ANNOTATIONS_SELECTOR );
111
119
  expect( annotations ).toHaveLength( 1 );
112
120
 
113
121
  const text = await getAnnotatedText();
@@ -115,7 +123,7 @@ describe( 'Annotations', () => {
115
123
 
116
124
  await clickOnBlockSettingsMenuItem( 'Edit as HTML' );
117
125
 
118
- const htmlContent = await page.$$(
126
+ const htmlContent = await canvas().$$(
119
127
  '.block-editor-block-list__block-html-textarea'
120
128
  );
121
129
  const html = await page.evaluate( ( el ) => {
@@ -136,7 +144,7 @@ describe( 'Annotations', () => {
136
144
  await page.keyboard.type( 'D' );
137
145
 
138
146
  await removeAnnotations();
139
- const htmlContent = await page.$$( '.wp-block-paragraph' );
147
+ const htmlContent = await canvas().$$( '.wp-block-paragraph' );
140
148
  const html = await page.evaluate( ( el ) => {
141
149
  return el.innerHTML;
142
150
  }, htmlContent[ 0 ] );
@@ -11,6 +11,7 @@ import {
11
11
  openDocumentSettingsSidebar,
12
12
  togglePreferencesOption,
13
13
  toggleMoreMenu,
14
+ canvas,
14
15
  } from '@wordpress/e2e-test-utils';
15
16
 
16
17
  describe( 'Block variations', () => {
@@ -45,7 +46,7 @@ describe( 'Block variations', () => {
45
46
  await insertBlock( 'Large Quote' );
46
47
 
47
48
  expect(
48
- await page.$(
49
+ await canvas().$(
49
50
  '.wp-block[data-type="core/quote"] blockquote.is-style-large'
50
51
  )
51
52
  ).toBeDefined();
@@ -58,7 +59,7 @@ describe( 'Block variations', () => {
58
59
  await page.keyboard.press( 'Enter' );
59
60
 
60
61
  expect(
61
- await page.$(
62
+ await canvas().$(
62
63
  '.wp-block[data-type="core/quote"] blockquote.is-style-large'
63
64
  )
64
65
  ).toBeDefined();
@@ -75,7 +76,7 @@ describe( 'Block variations', () => {
75
76
  test( 'Insert the Success Message block variation', async () => {
76
77
  await insertBlock( 'Success Message' );
77
78
 
78
- const successMessageBlock = await page.$(
79
+ const successMessageBlock = await canvas().$(
79
80
  '.wp-block[data-type="core/paragraph"]'
80
81
  );
81
82
  expect( successMessageBlock ).toBeDefined();
@@ -86,12 +87,12 @@ describe( 'Block variations', () => {
86
87
  test( 'Pick the additional variation in the inserted Columns block', async () => {
87
88
  await insertBlock( 'Columns' );
88
89
 
89
- const fourColumnsVariation = await page.waitForSelector(
90
+ const fourColumnsVariation = await canvas().waitForSelector(
90
91
  '.wp-block[data-type="core/columns"] .block-editor-block-variation-picker__variation[aria-label="Four columns"]'
91
92
  );
92
93
  await fourColumnsVariation.click();
93
94
  expect(
94
- await page.$$(
95
+ await canvas().$$(
95
96
  '.wp-block[data-type="core/columns"] .wp-block[data-type="core/column"]'
96
97
  )
97
98
  ).toHaveLength( 4 );