@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
@@ -12,6 +12,7 @@ import {
12
12
  pressKeyTimes,
13
13
  pressKeyWithModifier,
14
14
  setPostContent,
15
+ canvas,
15
16
  } from '@wordpress/e2e-test-utils';
16
17
 
17
18
  describe( 'cpt locking', () => {
@@ -35,7 +36,7 @@ describe( 'cpt locking', () => {
35
36
  };
36
37
 
37
38
  const shouldNotAllowBlocksToBeRemoved = async () => {
38
- await page.type(
39
+ await canvas().type(
39
40
  '.block-editor-rich-text__editable[data-type="core/paragraph"]',
40
41
  'p1'
41
42
  );
@@ -46,12 +47,12 @@ describe( 'cpt locking', () => {
46
47
  };
47
48
 
48
49
  const shouldAllowBlocksToBeMoved = async () => {
49
- await page.click(
50
+ await canvas().click(
50
51
  'div > .block-editor-rich-text__editable[data-type="core/paragraph"]'
51
52
  );
52
53
  expect( await page.$( 'button[aria-label="Move up"]' ) ).not.toBeNull();
53
54
  await page.click( 'button[aria-label="Move up"]' );
54
- await page.type(
55
+ await canvas().type(
55
56
  'div > .block-editor-rich-text__editable[data-type="core/paragraph"]',
56
57
  'p1'
57
58
  );
@@ -71,14 +72,14 @@ describe( 'cpt locking', () => {
71
72
  );
72
73
 
73
74
  it( 'should not allow blocks to be moved', async () => {
74
- await page.click(
75
+ await canvas().click(
75
76
  '.block-editor-rich-text__editable[data-type="core/paragraph"]'
76
77
  );
77
78
  expect( await page.$( 'button[aria-label="Move up"]' ) ).toBeNull();
78
79
  } );
79
80
 
80
81
  it( 'should not error when deleting the cotents of a paragraph', async () => {
81
- await page.click(
82
+ await canvas().click(
82
83
  '.block-editor-block-list__block[data-type="core/paragraph"]'
83
84
  );
84
85
  const textToType = 'Paragraph';
@@ -88,7 +89,7 @@ describe( 'cpt locking', () => {
88
89
  } );
89
90
 
90
91
  it( 'should insert line breaks when using enter and shift-enter', async () => {
91
- await page.click(
92
+ await canvas().click(
92
93
  '.block-editor-block-list__block[data-type="core/paragraph"]'
93
94
  );
94
95
  await page.keyboard.type( 'First line' );
@@ -118,12 +119,14 @@ describe( 'cpt locking', () => {
118
119
  } );
119
120
 
120
121
  it( 'should not allow blocks to be inserted in inner blocks', async () => {
121
- await page.click( 'button[aria-label="Two columns; equal split"]' );
122
+ await canvas().click(
123
+ 'button[aria-label="Two columns; equal split"]'
124
+ );
122
125
  await page.evaluate(
123
126
  () => new Promise( window.requestIdleCallback )
124
127
  );
125
128
  expect(
126
- await page.$(
129
+ await canvas().$(
127
130
  '.wp-block-column .block-editor-button-block-appender'
128
131
  )
129
132
  ).toBeNull();
@@ -173,7 +176,7 @@ describe( 'cpt locking', () => {
173
176
  } );
174
177
 
175
178
  it( 'should allow blocks to be removed', async () => {
176
- await page.type(
179
+ await canvas().type(
177
180
  '.block-editor-rich-text__editable[data-type="core/paragraph"]',
178
181
  'p1'
179
182
  );
@@ -193,7 +196,7 @@ describe( 'cpt locking', () => {
193
196
  } );
194
197
 
195
198
  it( 'should allow blocks to be removed', async () => {
196
- await page.type(
199
+ await canvas().type(
197
200
  'div > .block-editor-rich-text__editable[data-type="core/paragraph"]',
198
201
  'p1'
199
202
  );
@@ -219,7 +222,7 @@ describe( 'cpt locking', () => {
219
222
  );
220
223
 
221
224
  it( 'should not allow blocks to be moved', async () => {
222
- await page.click(
225
+ await canvas().click(
223
226
  '.block-editor-rich-text__editable[data-type="core/paragraph"]'
224
227
  );
225
228
  expect( await page.$( 'button[aria-label="Move up"]' ) ).toBeNull();
@@ -239,7 +242,7 @@ describe( 'cpt locking', () => {
239
242
  );
240
243
 
241
244
  it( 'should not allow blocks to be moved', async () => {
242
- await page.click(
245
+ await canvas().click(
243
246
  '.block-editor-rich-text__editable[data-type="core/paragraph"]'
244
247
  );
245
248
  expect( await page.$( 'button[aria-label="Move up"]' ) ).toBeNull();
@@ -35,8 +35,10 @@ describe( 'iframed inline styles', () => {
35
35
  await insertBlock( 'Iframed Inline Styles' );
36
36
 
37
37
  expect( await getEditedPostContent() ).toMatchSnapshot();
38
- expect( await getComputedStyle( page, 'padding' ) ).toBe( '20px' );
39
- expect( await getComputedStyle( page, 'border-width' ) ).toBe( '2px' );
38
+ expect( await getComputedStyle( canvas(), 'padding' ) ).toBe( '20px' );
39
+ expect( await getComputedStyle( canvas(), 'border-width' ) ).toBe(
40
+ '2px'
41
+ );
40
42
 
41
43
  await createNewTemplate( 'Iframed Test' );
42
44
 
@@ -48,5 +50,7 @@ describe( 'iframed inline styles', () => {
48
50
  expect( await getComputedStyle( canvas(), 'border-width' ) ).toBe(
49
51
  '2px'
50
52
  );
53
+
54
+ expect( console ).toHaveWarned();
51
55
  } );
52
56
  } );
@@ -39,7 +39,7 @@ describe( 'iframed masonry block', () => {
39
39
  await insertBlock( 'Iframed Masonry Block' );
40
40
 
41
41
  expect( await getEditedPostContent() ).toMatchSnapshot();
42
- expect( await didMasonryLoadCorrectly( page ) ).toBe( true );
42
+ expect( await didMasonryLoadCorrectly( canvas() ) ).toBe( true );
43
43
 
44
44
  await createNewTemplate( 'Iframed Test' );
45
45
  await canvas().waitForSelector( '.grid-item[style]' );
@@ -35,7 +35,7 @@ describe( 'iframed multiple block stylesheets', () => {
35
35
  it( 'should load multiple block stylesheets in iframe', async () => {
36
36
  await insertBlock( 'Iframed Multiple Stylesheets' );
37
37
 
38
- await page.waitForSelector(
38
+ await canvas().waitForSelector(
39
39
  '.wp-block-test-iframed-multiple-stylesheets'
40
40
  );
41
41
  await createNewTemplate( 'Iframed Test' );
@@ -8,6 +8,7 @@ import {
8
8
  getAllBlockInserterItemTitles,
9
9
  insertBlock,
10
10
  closeGlobalBlockInserter,
11
+ canvas,
11
12
  } from '@wordpress/e2e-test-utils';
12
13
 
13
14
  const QUICK_INSERTER_RESULTS_SELECTOR =
@@ -108,7 +109,7 @@ describe( 'Prioritized Inserter Blocks Setting on InnerBlocks', () => {
108
109
  describe( 'Slash inserter', () => {
109
110
  it( 'uses the priority ordering if prioritzed blocks setting is set', async () => {
110
111
  await insertBlock( 'Prioritized Inserter Blocks Set' );
111
- await page.click( '[data-type="core/image"]' );
112
+ await canvas().click( '[data-type="core/image"]' );
112
113
  await page.keyboard.press( 'Enter' );
113
114
  await page.keyboard.type( '/' );
114
115
  // Wait for the results to display.
@@ -12,18 +12,6 @@ exports[`Links can be created by selecting text and clicking Link 1`] = `
12
12
  <!-- /wp:paragraph -->"
13
13
  `;
14
14
 
15
- exports[`Links can be created by selecting text and using keyboard shortcuts 1`] = `
16
- "<!-- wp:paragraph -->
17
- <p>This is Gutenberg</p>
18
- <!-- /wp:paragraph -->"
19
- `;
20
-
21
- exports[`Links can be created by selecting text and using keyboard shortcuts 2`] = `
22
- "<!-- wp:paragraph -->
23
- <p>This is <a href="https://wordpress.org/gutenberg" target="_blank" rel="noreferrer noopener">Gutenberg</a></p>
24
- <!-- /wp:paragraph -->"
25
- `;
26
-
27
15
  exports[`Links can be created instantly when a URL is selected 1`] = `
28
16
  "<!-- wp:paragraph -->
29
17
  <p>This is Gutenberg: <a href="https://wordpress.org/gutenberg">https://wordpress.org/gutenberg</a></p>
@@ -59,15 +47,3 @@ exports[`Links can be removed 1`] = `
59
47
  <p>This is Gutenberg</p>
60
48
  <!-- /wp:paragraph -->"
61
49
  `;
62
-
63
- exports[`Links should contain a label when it should open in a new tab 1`] = `
64
- "<!-- wp:paragraph -->
65
- <p>This is <a href="http://w.org" target="_blank" rel="noreferrer noopener">WordPress</a></p>
66
- <!-- /wp:paragraph -->"
67
- `;
68
-
69
- exports[`Links should contain a label when it should open in a new tab 2`] = `
70
- "<!-- wp:paragraph -->
71
- <p>This is <a href="http://wordpress.org" target="_blank" rel="noreferrer noopener">WordPress</a></p>
72
- <!-- /wp:paragraph -->"
73
- `;
@@ -68,7 +68,6 @@ describe( 'adding inline tokens', () => {
68
68
  '.block-editor-format-toolbar__image-popover'
69
69
  );
70
70
  await page.keyboard.press( 'Tab' );
71
- await page.keyboard.press( 'Tab' );
72
71
  await page.keyboard.type( '20' );
73
72
  await page.keyboard.press( 'Enter' );
74
73
 
@@ -9,6 +9,7 @@ import {
9
9
  publishPost,
10
10
  saveDraft,
11
11
  toggleOfflineMode,
12
+ canvas,
12
13
  } from '@wordpress/e2e-test-utils';
13
14
 
14
15
  // Constant to override editor preference
@@ -258,7 +259,7 @@ describe( 'autosave', () => {
258
259
  await page.keyboard.type( 'before publish' );
259
260
  await publishPost();
260
261
 
261
- await page.click( '[data-type="core/paragraph"]' );
262
+ await canvas().click( '[data-type="core/paragraph"]' );
262
263
  await page.keyboard.type( ' after publish' );
263
264
 
264
265
  // Trigger remote autosave.
@@ -9,6 +9,7 @@ import {
9
9
  clickBlockToolbarButton,
10
10
  clickMenuItem,
11
11
  clickOnCloseModalButton,
12
+ canvas,
12
13
  } from '@wordpress/e2e-test-utils';
13
14
 
14
15
  const createTestParagraphBlocks = async () => {
@@ -51,7 +52,7 @@ describe( 'block editor keyboard shortcuts', () => {
51
52
  await createTestParagraphBlocks();
52
53
  expect( await getEditedPostContent() ).toMatchSnapshot();
53
54
  await pressKeyWithModifier( 'shift', 'ArrowUp' );
54
- await page.waitForSelector(
55
+ await canvas().waitForSelector(
55
56
  '[aria-label="Multiple selected blocks"]'
56
57
  );
57
58
  await moveUp();
@@ -63,7 +64,7 @@ describe( 'block editor keyboard shortcuts', () => {
63
64
  expect( await getEditedPostContent() ).toMatchSnapshot();
64
65
  await page.keyboard.press( 'ArrowUp' );
65
66
  await pressKeyWithModifier( 'shift', 'ArrowUp' );
66
- await page.waitForSelector(
67
+ await canvas().waitForSelector(
67
68
  '[aria-label="Multiple selected blocks"]'
68
69
  );
69
70
  await moveDown();
@@ -89,7 +90,7 @@ describe( 'block editor keyboard shortcuts', () => {
89
90
  } );
90
91
  it( 'should prevent deleting multiple selected blocks from inputs', async () => {
91
92
  await clickBlockToolbarButton( 'Options' );
92
- await clickMenuItem( 'Create Reusable block' );
93
+ await clickMenuItem( 'Create pattern' );
93
94
  const reusableBlockNameInputSelector =
94
95
  '.reusable-blocks-menu-items__convert-modal .components-text-control__input';
95
96
  const nameInput = await page.waitForSelector(
@@ -14,6 +14,7 @@ import {
14
14
  activatePlugin,
15
15
  deactivatePlugin,
16
16
  createReusableBlock,
17
+ canvas,
17
18
  } from '@wordpress/e2e-test-utils';
18
19
 
19
20
  async function insertBlocksOfSameType() {
@@ -115,8 +116,8 @@ describe( 'Block Grouping', () => {
115
116
  const getParagraphText = async () => {
116
117
  const paragraphInReusableSelector =
117
118
  '.block-editor-block-list__block[data-type="core/block"] p';
118
- await page.waitForSelector( paragraphInReusableSelector );
119
- return page.$eval(
119
+ await canvas().waitForSelector( paragraphInReusableSelector );
120
+ return canvas().$eval(
120
121
  paragraphInReusableSelector,
121
122
  ( element ) => element.innerText
122
123
  );
@@ -128,14 +129,14 @@ describe( 'Block Grouping', () => {
128
129
  await clickBlockToolbarButton( 'Options' );
129
130
  await clickMenuItem( 'Group' );
130
131
 
131
- let group = await page.$$( '[data-type="core/group"]' );
132
+ let group = await canvas().$$( '[data-type="core/group"]' );
132
133
  expect( group ).toHaveLength( 1 );
133
134
  // Make sure the paragraph in reusable block exists.
134
135
  expect( await getParagraphText() ).toMatch( paragraphText );
135
136
 
136
137
  await clickBlockToolbarButton( 'Options' );
137
138
  await clickMenuItem( 'Ungroup' );
138
- group = await page.$$( '[data-type="core/group"]' );
139
+ group = await canvas().$$( '[data-type="core/group"]' );
139
140
  expect( group ).toHaveLength( 0 );
140
141
  // Make sure the paragraph in reusable block exists.
141
142
  expect( await getParagraphText() ).toEqual( paragraphText );
@@ -11,6 +11,7 @@ import {
11
11
  openDocumentSettingsSidebar,
12
12
  isCurrentURL,
13
13
  openTypographyToolsPanelMenu,
14
+ canvas,
14
15
  } from '@wordpress/e2e-test-utils';
15
16
 
16
17
  describe( 'Change detection', () => {
@@ -78,7 +79,7 @@ describe( 'Change detection', () => {
78
79
  } );
79
80
 
80
81
  it( 'Should autosave post', async () => {
81
- await page.type( '.editor-post-title__input', 'Hello World' );
82
+ await canvas().type( '.editor-post-title__input', 'Hello World' );
82
83
 
83
84
  // Force autosave to occur immediately.
84
85
  await Promise.all( [
@@ -94,7 +95,7 @@ describe( 'Change detection', () => {
94
95
  } );
95
96
 
96
97
  it( 'Should prompt to confirm unsaved changes for autosaved draft for non-content fields', async () => {
97
- await page.type( '.editor-post-title__input', 'Hello World' );
98
+ await canvas().type( '.editor-post-title__input', 'Hello World' );
98
99
 
99
100
  // Toggle post as needing review (not persisted for autosave).
100
101
  await ensureSidebarOpened();
@@ -117,7 +118,7 @@ describe( 'Change detection', () => {
117
118
  } );
118
119
 
119
120
  it( 'Should prompt to confirm unsaved changes for autosaved published post', async () => {
120
- await page.type( '.editor-post-title__input', 'Hello World' );
121
+ await canvas().type( '.editor-post-title__input', 'Hello World' );
121
122
 
122
123
  await publishPost();
123
124
 
@@ -130,7 +131,7 @@ describe( 'Change detection', () => {
130
131
  ] );
131
132
 
132
133
  // Should be dirty after autosave change of published post.
133
- await page.type( '.editor-post-title__input', '!' );
134
+ await canvas().type( '.editor-post-title__input', '!' );
134
135
 
135
136
  await Promise.all( [
136
137
  page.waitForSelector(
@@ -162,7 +163,7 @@ describe( 'Change detection', () => {
162
163
  } );
163
164
 
164
165
  it( 'Should prompt if property changed without save', async () => {
165
- await page.type( '.editor-post-title__input', 'Hello World' );
166
+ await canvas().type( '.editor-post-title__input', 'Hello World' );
166
167
 
167
168
  await assertIsDirty( true );
168
169
  } );
@@ -175,7 +176,7 @@ describe( 'Change detection', () => {
175
176
  } );
176
177
 
177
178
  it( 'Should not prompt if changes saved', async () => {
178
- await page.type( '.editor-post-title__input', 'Hello World' );
179
+ await canvas().type( '.editor-post-title__input', 'Hello World' );
179
180
 
180
181
  await saveDraft();
181
182
 
@@ -192,7 +193,7 @@ describe( 'Change detection', () => {
192
193
  } );
193
194
 
194
195
  it( 'Should not save if all changes saved', async () => {
195
- await page.type( '.editor-post-title__input', 'Hello World' );
196
+ await canvas().type( '.editor-post-title__input', 'Hello World' );
196
197
 
197
198
  await saveDraft();
198
199
 
@@ -205,7 +206,7 @@ describe( 'Change detection', () => {
205
206
  } );
206
207
 
207
208
  it( 'Should prompt if save failed', async () => {
208
- await page.type( '.editor-post-title__input', 'Hello World' );
209
+ await canvas().type( '.editor-post-title__input', 'Hello World' );
209
210
 
210
211
  await page.setOfflineMode( true );
211
212
 
@@ -231,7 +232,7 @@ describe( 'Change detection', () => {
231
232
  } );
232
233
 
233
234
  it( 'Should prompt if changes and save is in-flight', async () => {
234
- await page.type( '.editor-post-title__input', 'Hello World' );
235
+ await canvas().type( '.editor-post-title__input', 'Hello World' );
235
236
 
236
237
  // Hold the posts request so we don't deal with race conditions of the
237
238
  // save completing early. Other requests should be allowed to continue,
@@ -247,7 +248,7 @@ describe( 'Change detection', () => {
247
248
  } );
248
249
 
249
250
  it( 'Should prompt if changes made while save is in-flight', async () => {
250
- await page.type( '.editor-post-title__input', 'Hello World' );
251
+ await canvas().type( '.editor-post-title__input', 'Hello World' );
251
252
 
252
253
  // Hold the posts request so we don't deal with race conditions of the
253
254
  // save completing early. Other requests should be allowed to continue,
@@ -257,7 +258,7 @@ describe( 'Change detection', () => {
257
258
  // Keyboard shortcut Ctrl+S save.
258
259
  await pressKeyWithModifier( 'primary', 'S' );
259
260
 
260
- await page.type( '.editor-post-title__input', '!' );
261
+ await canvas().type( '.editor-post-title__input', '!' );
261
262
  await page.waitForSelector( '.editor-post-save-draft' );
262
263
 
263
264
  await releaseSaveIntercept();
@@ -266,7 +267,7 @@ describe( 'Change detection', () => {
266
267
  } );
267
268
 
268
269
  it( 'Should prompt if property changes made while save is in-flight, and save completes', async () => {
269
- await page.type( '.editor-post-title__input', 'Hello World' );
270
+ await canvas().type( '.editor-post-title__input', 'Hello World' );
270
271
 
271
272
  // Hold the posts request so we don't deal with race conditions of the
272
273
  // save completing early.
@@ -282,7 +283,7 @@ describe( 'Change detection', () => {
282
283
  );
283
284
 
284
285
  // Dirty post while save is in-flight.
285
- await page.type( '.editor-post-title__input', '!' );
286
+ await canvas().type( '.editor-post-title__input', '!' );
286
287
 
287
288
  // Allow save to complete. Disabling interception flushes pending.
288
289
  await Promise.all( [ savedPromise, releaseSaveIntercept() ] );
@@ -291,7 +292,7 @@ describe( 'Change detection', () => {
291
292
  } );
292
293
 
293
294
  it( 'Should prompt if block revision is made while save is in-flight, and save completes', async () => {
294
- await page.type( '.editor-post-title__input', 'Hello World' );
295
+ await canvas().type( '.editor-post-title__input', 'Hello World' );
295
296
 
296
297
  // Hold the posts request so we don't deal with race conditions of the
297
298
  // save completing early.
@@ -324,7 +325,7 @@ describe( 'Change detection', () => {
324
325
  await saveDraft();
325
326
 
326
327
  // Verify that the title is empty.
327
- const title = await page.$eval(
328
+ const title = await canvas().$eval(
328
329
  '.editor-post-title__input',
329
330
  // Trim padding non-breaking space.
330
331
  ( element ) => element.textContent.trim()
@@ -337,7 +338,7 @@ describe( 'Change detection', () => {
337
338
 
338
339
  it( 'should not prompt to confirm unsaved changes when trashing an existing post', async () => {
339
340
  // Enter title.
340
- await page.type( '.editor-post-title__input', 'Hello World' );
341
+ await canvas().type( '.editor-post-title__input', 'Hello World' );
341
342
 
342
343
  // Save.
343
344
  await saveDraft();
@@ -381,7 +382,7 @@ describe( 'Change detection', () => {
381
382
  ] );
382
383
 
383
384
  // Change the paragraph's `drop cap`.
384
- await page.click( '[data-type="core/paragraph"]' );
385
+ await canvas().click( '[data-type="core/paragraph"]' );
385
386
 
386
387
  await openTypographyToolsPanelMenu();
387
388
  await page.click( 'button[aria-label="Show Drop cap"]' );
@@ -390,7 +391,7 @@ describe( 'Change detection', () => {
390
391
  "//label[contains(text(), 'Drop cap')]"
391
392
  );
392
393
  await dropCapToggle.click();
393
- await page.click( '[data-type="core/paragraph"]' );
394
+ await canvas().click( '[data-type="core/paragraph"]' );
394
395
 
395
396
  // Check that the post is dirty.
396
397
  await page.waitForSelector( '.editor-post-save-draft' );
@@ -402,7 +403,7 @@ describe( 'Change detection', () => {
402
403
  ] );
403
404
 
404
405
  // Change the paragraph's `drop cap` again.
405
- await page.click( '[data-type="core/paragraph"]' );
406
+ await canvas().click( '[data-type="core/paragraph"]' );
406
407
  await dropCapToggle.click();
407
408
 
408
409
  // Check that the post is dirty.
@@ -11,6 +11,7 @@ import {
11
11
  pressKeyTimes,
12
12
  pressKeyWithModifier,
13
13
  openTypographyToolsPanelMenu,
14
+ canvas,
14
15
  } from '@wordpress/e2e-test-utils';
15
16
 
16
17
  describe( 'Editing modes (visual/HTML)', () => {
@@ -22,7 +23,7 @@ describe( 'Editing modes (visual/HTML)', () => {
22
23
 
23
24
  it( 'should switch between visual and HTML modes', async () => {
24
25
  // This block should be in "visual" mode by default.
25
- let visualBlock = await page.$$( '[data-block].rich-text' );
26
+ let visualBlock = await canvas().$$( '[data-block].rich-text' );
26
27
  expect( visualBlock ).toHaveLength( 1 );
27
28
 
28
29
  // Change editing mode from "Visual" to "HTML".
@@ -30,7 +31,7 @@ describe( 'Editing modes (visual/HTML)', () => {
30
31
  await clickMenuItem( 'Edit as HTML' );
31
32
 
32
33
  // Wait for the block to be converted to HTML editing mode.
33
- const htmlBlock = await page.$$(
34
+ const htmlBlock = await canvas().$$(
34
35
  '[data-block] .block-editor-block-list__block-html-textarea'
35
36
  );
36
37
  expect( htmlBlock ).toHaveLength( 1 );
@@ -40,7 +41,7 @@ describe( 'Editing modes (visual/HTML)', () => {
40
41
  await clickMenuItem( 'Edit visually' );
41
42
 
42
43
  // This block should be in "visual" mode by default.
43
- visualBlock = await page.$$( '[data-block].rich-text' );
44
+ visualBlock = await canvas().$$( '[data-block].rich-text' );
44
45
  expect( visualBlock ).toHaveLength( 1 );
45
46
  } );
46
47
 
@@ -67,7 +68,7 @@ describe( 'Editing modes (visual/HTML)', () => {
67
68
  await clickMenuItem( 'Edit as HTML' );
68
69
 
69
70
  // Make sure the paragraph content is rendered as expected.
70
- let htmlBlockContent = await page.$eval(
71
+ let htmlBlockContent = await canvas().$eval(
71
72
  '.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea',
72
73
  ( node ) => node.textContent
73
74
  );
@@ -83,7 +84,7 @@ describe( 'Editing modes (visual/HTML)', () => {
83
84
  await dropCapToggle.click();
84
85
 
85
86
  // Make sure the HTML content updated.
86
- htmlBlockContent = await page.$eval(
87
+ htmlBlockContent = await canvas().$eval(
87
88
  '.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea',
88
89
  ( node ) => node.textContent
89
90
  );
@@ -138,7 +139,7 @@ describe( 'Editing modes (visual/HTML)', () => {
138
139
  const editPosition = textContent.indexOf( 'Hello' );
139
140
 
140
141
  // Replace the word 'Hello' with 'Hi'.
141
- await page.click( '.editor-post-title__input' );
142
+ await canvas().click( '.editor-post-title__input' );
142
143
  await page.keyboard.press( 'Tab' );
143
144
  await pressKeyTimes( 'ArrowRight', editPosition );
144
145
  await pressKeyTimes( 'Delete', 5 );
@@ -3,7 +3,6 @@
3
3
  */
4
4
  import {
5
5
  clickBlockAppender,
6
- clickButton,
7
6
  createEmbeddingMatcher,
8
7
  createJSONResponse,
9
8
  createNewPost,
@@ -12,6 +11,7 @@ import {
12
11
  insertBlock,
13
12
  publishPost,
14
13
  setUpResponseMocking,
14
+ canvas,
15
15
  } from '@wordpress/e2e-test-utils';
16
16
 
17
17
  const MOCK_EMBED_WORDPRESS_SUCCESS_RESPONSE = {
@@ -178,24 +178,24 @@ describe( 'Embedding content', () => {
178
178
  it( 'should render embeds in the correct state', async () => {
179
179
  // Valid embed. Should render valid figure element.
180
180
  await insertEmbed( 'https://twitter.com/notnownikki' );
181
- await page.waitForSelector( 'figure.wp-block-embed' );
181
+ await canvas().waitForSelector( 'figure.wp-block-embed' );
182
182
 
183
183
  // Valid provider; invalid content. Should render failed, edit state.
184
184
  await insertEmbed( 'https://twitter.com/wooyaygutenberg123454312' );
185
- await page.waitForSelector(
185
+ await canvas().waitForSelector(
186
186
  'input[value="https://twitter.com/wooyaygutenberg123454312"]'
187
187
  );
188
188
 
189
189
  // WordPress invalid content. Should render failed, edit state.
190
190
  await insertEmbed( 'https://wordpress.org/gutenberg/handbook/' );
191
- await page.waitForSelector(
191
+ await canvas().waitForSelector(
192
192
  'input[value="https://wordpress.org/gutenberg/handbook/"]'
193
193
  );
194
194
 
195
195
  // Provider whose oembed API has gone wrong. Should render failed, edit
196
196
  // state.
197
197
  await insertEmbed( 'https://twitter.com/thatbunty' );
198
- await page.waitForSelector(
198
+ await canvas().waitForSelector(
199
199
  'input[value="https://twitter.com/thatbunty"]'
200
200
  );
201
201
 
@@ -204,18 +204,18 @@ describe( 'Embedding content', () => {
204
204
  await insertEmbed(
205
205
  'https://wordpress.org/gutenberg/handbook/block-api/attributes/'
206
206
  );
207
- await page.waitForSelector( 'figure.wp-block-embed' );
207
+ await canvas().waitForSelector( 'figure.wp-block-embed' );
208
208
 
209
209
  // Video content. Should render valid figure element, and include the
210
210
  // aspect ratio class.
211
211
  await insertEmbed( 'https://www.youtube.com/watch?v=lXMskKTw3Bc' );
212
- await page.waitForSelector(
212
+ await canvas().waitForSelector(
213
213
  'figure.wp-block-embed.is-type-video.wp-embed-aspect-16-9'
214
214
  );
215
215
 
216
216
  // Photo content. Should render valid figure element.
217
217
  await insertEmbed( 'https://cloudup.com/cQFlxqtY4ob' );
218
- await page.waitForSelector(
218
+ await canvas().waitForSelector(
219
219
  'iframe[title="Embedded content from cloudup"'
220
220
  );
221
221
 
@@ -230,18 +230,21 @@ describe( 'Embedding content', () => {
230
230
  // has styles applied which depend on resize observer, wait for the
231
231
  // expected size class to settle before clicking, since otherwise a race
232
232
  // condition could occur on the placeholder layout vs. click intent.
233
- await page.waitForSelector(
233
+ await canvas().waitForSelector(
234
234
  '.components-placeholder.is-large .components-placeholder__error'
235
235
  );
236
236
 
237
- await clickButton( 'Convert to link' );
237
+ const button = await canvas().waitForXPath(
238
+ `//button[contains(text(), 'Convert to link')]`
239
+ );
240
+ await button.click();
238
241
  expect( await getEditedPostContent() ).toMatchSnapshot();
239
242
  } );
240
243
 
241
244
  it( 'should retry embeds that could not be embedded with trailing slashes, without the trailing slashes', async () => {
242
245
  await insertEmbed( 'https://twitter.com/notnownikki/' );
243
246
  // The twitter block should appear correctly.
244
- await page.waitForSelector( 'figure.wp-block-embed' );
247
+ await canvas().waitForSelector( 'figure.wp-block-embed' );
245
248
  expect( await getEditedPostContent() ).toMatchSnapshot();
246
249
  } );
247
250
 
@@ -253,7 +256,7 @@ describe( 'Embedding content', () => {
253
256
  // has styles applied which depend on resize observer, wait for the
254
257
  // expected size class to settle before clicking, since otherwise a race
255
258
  // condition could occur on the placeholder layout vs. click intent.
256
- await page.waitForSelector(
259
+ await canvas().waitForSelector(
257
260
  '.components-placeholder.is-large .components-placeholder__error'
258
261
  );
259
262
 
@@ -268,8 +271,11 @@ describe( 'Embedding content', () => {
268
271
  ),
269
272
  },
270
273
  ] );
271
- await clickButton( 'Try again' );
272
- await page.waitForSelector( 'figure.wp-block-embed' );
274
+ const button = await canvas().waitForXPath(
275
+ `//button[contains(text(), 'Try again')]`
276
+ );
277
+ await button.click();
278
+ await canvas().waitForSelector( 'figure.wp-block-embed' );
273
279
  expect( await getEditedPostContent() ).toMatchSnapshot();
274
280
  } );
275
281
 
@@ -292,6 +298,6 @@ describe( 'Embedding content', () => {
292
298
  await insertEmbed( postUrl );
293
299
 
294
300
  // Check the block has become a WordPress block.
295
- await page.waitForSelector( 'figure.wp-block-embed' );
301
+ await canvas().waitForSelector( 'figure.wp-block-embed' );
296
302
  } );
297
303
  } );