@wordpress/e2e-tests 7.5.0 → 7.6.0

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 (52) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/config/setup-test-framework.js +9 -0
  3. package/package.json +7 -7
  4. package/plugins/block-context.php +1 -1
  5. package/plugins/iframed-block/block.json +1 -1
  6. package/plugins/iframed-block.php +2 -2
  7. package/plugins/iframed-enqueue-block-assets.php +1 -1
  8. package/plugins/iframed-inline-styles/block.json +1 -1
  9. package/plugins/iframed-inline-styles/editor.js +1 -1
  10. package/plugins/iframed-inline-styles.php +3 -3
  11. package/plugins/iframed-masonry-block/block.json +1 -1
  12. package/plugins/iframed-masonry-block/editor.js +1 -1
  13. package/plugins/iframed-masonry-block.php +2 -2
  14. package/plugins/iframed-multiple-stylesheets/block.json +1 -1
  15. package/plugins/iframed-multiple-stylesheets/editor.js +1 -1
  16. package/plugins/iframed-multiple-stylesheets.php +2 -2
  17. package/plugins/marquee-function-widget.php +2 -2
  18. package/specs/editor/blocks/post-title.test.js +5 -4
  19. package/specs/editor/blocks/site-title.test.js +3 -2
  20. package/specs/editor/plugins/annotations.test.js +17 -9
  21. package/specs/editor/plugins/block-variations.test.js +6 -5
  22. package/specs/editor/plugins/cpt-locking.test.js +15 -12
  23. package/specs/editor/plugins/iframed-inline-styles.test.js +6 -2
  24. package/specs/editor/plugins/iframed-masonry-block.test.js +1 -1
  25. package/specs/editor/plugins/iframed-multiple-block-stylesheets.test.js +1 -1
  26. package/specs/editor/plugins/inner-blocks-allowed-blocks.test.js +7 -6
  27. package/specs/editor/plugins/inner-blocks-prioritized-inserter-blocks.test.js +2 -1
  28. package/specs/editor/various/__snapshots__/links.test.js.snap +0 -24
  29. package/specs/editor/various/adding-inline-tokens.test.js +0 -1
  30. package/specs/editor/various/autosave.test.js +2 -1
  31. package/specs/editor/various/block-editor-keyboard-shortcuts.test.js +3 -2
  32. package/specs/editor/various/block-grouping.test.js +5 -4
  33. package/specs/editor/various/block-hierarchy-navigation.test.js +12 -9
  34. package/specs/editor/various/change-detection.test.js +20 -19
  35. package/specs/editor/various/editor-modes.test.js +7 -6
  36. package/specs/editor/various/embedding.test.js +21 -15
  37. package/specs/editor/various/inserting-blocks.test.js +19 -14
  38. package/specs/editor/various/invalid-block.test.js +4 -6
  39. package/specs/editor/various/keyboard-navigable-blocks.test.js +16 -17
  40. package/specs/editor/various/links.test.js +22 -154
  41. package/specs/editor/various/navigable-toolbar.test.js +14 -14
  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 +22 -18
  47. package/specs/editor/various/rich-text.test.js +7 -6
  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/site-editor.test.js +2 -1
  52. package/specs/site-editor/settings-sidebar.test.js +2 -2
@@ -11,6 +11,7 @@ import {
11
11
  searchForBlock,
12
12
  setBrowserViewport,
13
13
  pressKeyWithModifier,
14
+ canvas,
14
15
  } from '@wordpress/e2e-test-utils';
15
16
 
16
17
  /** @typedef {import('puppeteer-core').ElementHandle} ElementHandle */
@@ -165,7 +166,7 @@ describe( 'Inserting blocks', () => {
165
166
  await page.keyboard.press( 'Enter' );
166
167
 
167
168
  expect(
168
- await page.waitForSelector( '[data-type="core/tag-cloud"]' )
169
+ await canvas().waitForSelector( '[data-type="core/tag-cloud"]' )
169
170
  ).not.toBeNull();
170
171
  } );
171
172
 
@@ -175,7 +176,7 @@ describe( 'Inserting blocks', () => {
175
176
  await page.keyboard.type( '1.1' );
176
177
 
177
178
  // After inserting the Buttons block the inner button block should be selected.
178
- const selectedButtonBlocks = await page.$$(
179
+ const selectedButtonBlocks = await canvas().$$(
179
180
  '.wp-block-button.is-selected'
180
181
  );
181
182
  expect( selectedButtonBlocks.length ).toBe( 1 );
@@ -185,7 +186,7 @@ describe( 'Inserting blocks', () => {
185
186
  window.wp.data.dispatch( 'core/block-editor' ).clearSelectedBlock()
186
187
  );
187
188
  // Specifically click the root container appender.
188
- await page.click(
189
+ await canvas().click(
189
190
  '.block-editor-block-list__layout.is-root-container > .block-list-appender .block-editor-inserter__toggle'
190
191
  );
191
192
 
@@ -222,7 +223,7 @@ describe( 'Inserting blocks', () => {
222
223
  expect( await getEditedPostContent() ).toMatchSnapshot();
223
224
 
224
225
  // Using the between inserter.
225
- const insertionPoint = await page.$( '[data-type="core/heading"]' );
226
+ const insertionPoint = await canvas().$( '[data-type="core/heading"]' );
226
227
  const rect = await insertionPoint.boundingBox();
227
228
  await page.mouse.move( rect.x + rect.width / 2, rect.y - 10, {
228
229
  steps: 10,
@@ -247,7 +248,7 @@ describe( 'Inserting blocks', () => {
247
248
  await insertBlock( 'Paragraph' );
248
249
  await page.keyboard.type( 'First paragraph' );
249
250
  await insertBlock( 'Image' );
250
- const paragraphBlock = await page.$(
251
+ const paragraphBlock = await canvas().$(
251
252
  'p[aria-label="Paragraph block"]'
252
253
  );
253
254
  paragraphBlock.click();
@@ -278,14 +279,16 @@ describe( 'Inserting blocks', () => {
278
279
  it( 'inserts a block in proper place after having clicked `Browse All` from block appender', async () => {
279
280
  await insertBlock( 'Group' );
280
281
  // Select the default, selected Group layout from the variation picker.
281
- await page.click(
282
+ await canvas().click(
282
283
  'button[aria-label="Group: Gather blocks in a container."]'
283
284
  );
284
285
  await insertBlock( 'Paragraph' );
285
286
  await page.keyboard.type( 'Paragraph after group' );
286
287
  // Click the Group first to make the appender inside it clickable.
287
- await page.click( '[data-type="core/group"]' );
288
- await page.click( '[data-type="core/group"] [aria-label="Add block"]' );
288
+ await canvas().click( '[data-type="core/group"]' );
289
+ await canvas().click(
290
+ '[data-type="core/group"] [aria-label="Add block"]'
291
+ );
289
292
  const browseAll = await page.waitForXPath(
290
293
  '//button[text()="Browse all"]'
291
294
  );
@@ -300,14 +303,16 @@ describe( 'Inserting blocks', () => {
300
303
  '.block-editor-inserter__search input,.block-editor-inserter__search-input,input.block-editor-inserter__search';
301
304
  await insertBlock( 'Group' );
302
305
  // Select the default, selected Group layout from the variation picker.
303
- await page.click(
306
+ await canvas().click(
304
307
  'button[aria-label="Group: Gather blocks in a container."]'
305
308
  );
306
309
  await insertBlock( 'Paragraph' );
307
310
  await page.keyboard.type( 'Text' );
308
311
  // Click the Group first to make the appender inside it clickable.
309
- await page.click( '[data-type="core/group"]' );
310
- await page.click( '[data-type="core/group"] [aria-label="Add block"]' );
312
+ await canvas().click( '[data-type="core/group"]' );
313
+ await canvas().click(
314
+ '[data-type="core/group"] [aria-label="Add block"]'
315
+ );
311
316
  await page.waitForSelector( INSERTER_SEARCH_SELECTOR );
312
317
  await page.focus( INSERTER_SEARCH_SELECTOR );
313
318
  await pressKeyWithModifier( 'primary', 'a' );
@@ -337,7 +342,7 @@ describe( 'Inserting blocks', () => {
337
342
  expect( inserterPanels.length ).toBe( 0 );
338
343
 
339
344
  // The editable 'Read More' text should be focused.
340
- const isFocusInBlock = await page.evaluate( () =>
345
+ const isFocusInBlock = await canvas().evaluate( () =>
341
346
  document
342
347
  .querySelector( '[data-type="core/more"]' )
343
348
  .contains( document.activeElement )
@@ -366,14 +371,14 @@ describe( 'Inserting blocks', () => {
366
371
  async ( viewport ) => {
367
372
  await setBrowserViewport( viewport );
368
373
 
369
- await page.type(
374
+ await canvas().type(
370
375
  '.block-editor-default-block-appender__content',
371
376
  'Testing inserted block focus'
372
377
  );
373
378
 
374
379
  await insertBlock( 'Image' );
375
380
 
376
- await page.waitForSelector( 'figure[data-type="core/image"]' );
381
+ await canvas().waitForSelector( 'figure[data-type="core/image"]' );
377
382
 
378
383
  const selectedBlock = await page.evaluate( () => {
379
384
  return wp.data.select( 'core/block-editor' ).getSelectedBlock();
@@ -7,6 +7,7 @@ import {
7
7
  clickBlockAppender,
8
8
  clickBlockToolbarButton,
9
9
  setPostContent,
10
+ canvas,
10
11
  } from '@wordpress/e2e-test-utils';
11
12
 
12
13
  describe( 'invalid blocks', () => {
@@ -25,7 +26,7 @@ describe( 'invalid blocks', () => {
25
26
  await clickMenuItem( 'Edit as HTML' );
26
27
 
27
28
  // Focus on the textarea and enter an invalid paragraph
28
- await page.click(
29
+ await canvas().click(
29
30
  '.block-editor-block-list__layout .block-editor-block-list__block .block-editor-block-list__block-html-textarea'
30
31
  );
31
32
  await page.keyboard.type( '<p>invalid paragraph' );
@@ -34,7 +35,7 @@ describe( 'invalid blocks', () => {
34
35
  await page.click( '.editor-post-save-draft' );
35
36
 
36
37
  // Click on the 'three-dots' menu toggle.
37
- await page.click(
38
+ await canvas().click(
38
39
  '.block-editor-warning__actions button[aria-label="More options"]'
39
40
  );
40
41
 
@@ -75,7 +76,7 @@ describe( 'invalid blocks', () => {
75
76
  expect( hasAlert ).toBe( false );
76
77
  } );
77
78
 
78
- it( 'should strip potentially malicious script tags', async () => {
79
+ it( 'should not trigger malicious script tags when using a shortcode block', async () => {
79
80
  let hasAlert = false;
80
81
 
81
82
  page.on( 'dialog', () => {
@@ -94,9 +95,6 @@ describe( 'invalid blocks', () => {
94
95
 
95
96
  // Give the browser time to show the alert.
96
97
  await page.evaluate( () => new Promise( window.requestIdleCallback ) );
97
-
98
- expect( console ).toHaveWarned();
99
- expect( console ).toHaveErrored();
100
98
  expect( hasAlert ).toBe( false );
101
99
  } );
102
100
  } );
@@ -8,13 +8,16 @@ import {
8
8
  clickBlockAppender,
9
9
  getEditedPostContent,
10
10
  showBlockToolbar,
11
+ canvas,
11
12
  } from '@wordpress/e2e-test-utils';
12
13
 
13
14
  async function getActiveLabel() {
14
15
  return await page.evaluate( () => {
16
+ const { activeElement } =
17
+ document.activeElement.contentDocument ?? document;
15
18
  return (
16
- document.activeElement.getAttribute( 'aria-label' ) ||
17
- document.activeElement.innerHTML
19
+ activeElement.getAttribute( 'aria-label' ) ||
20
+ activeElement.innerHTML
18
21
  );
19
22
  } );
20
23
  }
@@ -34,7 +37,11 @@ const tabThroughParagraphBlock = async ( paragraphText ) => {
34
37
  await page.keyboard.press( 'Tab' );
35
38
  await expect( await getActiveLabel() ).toBe( 'Paragraph block' );
36
39
  await expect(
37
- await page.evaluate( () => document.activeElement.innerHTML )
40
+ await page.evaluate( () => {
41
+ const { activeElement } =
42
+ document.activeElement.contentDocument ?? document;
43
+ return activeElement.innerHTML;
44
+ } )
38
45
  ).toBe( paragraphText );
39
46
 
40
47
  await page.keyboard.press( 'Tab' );
@@ -113,16 +120,12 @@ describe( 'Order of block keyboard navigation', () => {
113
120
  }
114
121
 
115
122
  // Clear the selected block.
116
- const paragraph = await page.$( '[data-type="core/paragraph"]' );
123
+ const paragraph = await canvas().$( '[data-type="core/paragraph"]' );
117
124
  const box = await paragraph.boundingBox();
118
125
  await page.mouse.click( box.x - 1, box.y );
119
126
 
120
127
  await page.keyboard.press( 'Tab' );
121
- await expect(
122
- await page.evaluate( () => {
123
- return document.activeElement.getAttribute( 'aria-label' );
124
- } )
125
- ).toBe( 'Add title' );
128
+ await expect( await getActiveLabel() ).toBe( 'Add title' );
126
129
 
127
130
  await page.keyboard.press( 'Tab' );
128
131
  await expect( await getActiveLabel() ).toBe(
@@ -148,7 +151,7 @@ describe( 'Order of block keyboard navigation', () => {
148
151
  }
149
152
 
150
153
  // Clear the selected block.
151
- const paragraph = await page.$( '[data-type="core/paragraph"]' );
154
+ const paragraph = await canvas().$( '[data-type="core/paragraph"]' );
152
155
  const box = await paragraph.boundingBox();
153
156
  await page.mouse.click( box.x - 1, box.y );
154
157
 
@@ -176,11 +179,7 @@ describe( 'Order of block keyboard navigation', () => {
176
179
  );
177
180
 
178
181
  await pressKeyWithModifier( 'shift', 'Tab' );
179
- await expect(
180
- await page.evaluate( () => {
181
- return document.activeElement.getAttribute( 'aria-label' );
182
- } )
183
- ).toBe( 'Add title' );
182
+ await expect( await getActiveLabel() ).toBe( 'Add title' );
184
183
  } );
185
184
 
186
185
  it( 'should navigate correctly with multi selection', async () => {
@@ -217,7 +216,7 @@ describe( 'Order of block keyboard navigation', () => {
217
216
  await insertBlock( 'Image' );
218
217
 
219
218
  // Make sure the upload button has focus.
220
- const uploadButton = await page.waitForXPath(
219
+ const uploadButton = await canvas().waitForXPath(
221
220
  '//button[contains( text(), "Upload" ) ]'
222
221
  );
223
222
  await expect( uploadButton ).toHaveFocus();
@@ -231,7 +230,7 @@ describe( 'Order of block keyboard navigation', () => {
231
230
  // Insert a group block.
232
231
  await insertBlock( 'Group' );
233
232
  // Select the default, selected Group layout from the variation picker.
234
- await page.click(
233
+ await canvas().click(
235
234
  'button[aria-label="Group: Gather blocks in a container."]'
236
235
  );
237
236
  // If active label matches, that means focus did not change from group block wrapper.
@@ -9,6 +9,7 @@ import {
9
9
  pressKeyWithModifier,
10
10
  showBlockToolbar,
11
11
  pressKeyTimes,
12
+ canvas,
12
13
  } from '@wordpress/e2e-test-utils';
13
14
 
14
15
  describe( 'Links', () => {
@@ -17,9 +18,16 @@ describe( 'Links', () => {
17
18
  } );
18
19
 
19
20
  const waitForURLFieldAutoFocus = async () => {
20
- await page.waitForFunction(
21
- () => !! document.activeElement.closest( '.block-editor-url-input' )
22
- );
21
+ await page.waitForFunction( () => {
22
+ const input = document.querySelector(
23
+ '.block-editor-url-input__input'
24
+ );
25
+ if ( input ) {
26
+ input.focus();
27
+ return true;
28
+ }
29
+ return false;
30
+ } );
23
31
  };
24
32
 
25
33
  it( 'will use Post title as link text if link to existing post is created without any text selected', async () => {
@@ -50,7 +58,7 @@ describe( 'Links', () => {
50
58
 
51
59
  await page.keyboard.press( 'Enter' );
52
60
 
53
- const actualText = await page.evaluate(
61
+ const actualText = await canvas().evaluate(
54
62
  () =>
55
63
  document.querySelector( '.block-editor-rich-text__editable a' )
56
64
  .textContent
@@ -103,48 +111,6 @@ describe( 'Links', () => {
103
111
  expect( urlInputValue ).toBe( '' );
104
112
  } );
105
113
 
106
- it( 'can be created by selecting text and using keyboard shortcuts', async () => {
107
- // Create a block with some text.
108
- await clickBlockAppender();
109
- await page.keyboard.type( 'This is Gutenberg' );
110
-
111
- // Select some text.
112
- await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
113
-
114
- // Press Cmd+K to insert a link.
115
- await pressKeyWithModifier( 'primary', 'K' );
116
-
117
- // Wait for the URL field to auto-focus.
118
- await waitForURLFieldAutoFocus();
119
-
120
- // Type a URL.
121
- await page.keyboard.type( 'https://wordpress.org/gutenberg' );
122
-
123
- // Open settings.
124
- await page.keyboard.press( 'Tab' );
125
- await page.keyboard.press( 'Space' );
126
-
127
- // Navigate to and toggle the "Open in new tab" checkbox.
128
- await page.keyboard.press( 'Tab' );
129
- await page.keyboard.press( 'Space' );
130
-
131
- // Toggle should still have focus and be checked.
132
- await page.waitForSelector(
133
- ':focus:checked.components-form-toggle__input'
134
- );
135
-
136
- // Ensure that the contents of the post have not been changed, since at
137
- // this point the link is still not inserted.
138
- expect( await getEditedPostContent() ).toMatchSnapshot();
139
-
140
- // Tab back to the Submit and apply the link.
141
- await page.keyboard.press( 'Tab' );
142
- await page.keyboard.press( 'Enter' );
143
-
144
- // The link should have been inserted.
145
- expect( await getEditedPostContent() ).toMatchSnapshot();
146
- } );
147
-
148
114
  it( 'can be created without any text selected', async () => {
149
115
  // Create a block with some text.
150
116
  await clickBlockAppender();
@@ -207,7 +173,7 @@ describe( 'Links', () => {
207
173
  await page.keyboard.type( 'https://wordpress.org/gutenberg' );
208
174
 
209
175
  // Click somewhere else - it doesn't really matter where.
210
- await page.click( '.editor-post-title' );
176
+ await canvas().click( '.editor-post-title' );
211
177
  } );
212
178
 
213
179
  const createAndReselectLink = async () => {
@@ -346,7 +312,7 @@ describe( 'Links', () => {
346
312
 
347
313
  const createPostWithTitle = async ( titleText ) => {
348
314
  await createNewPost();
349
- await page.type( '.editor-post-title__input', titleText );
315
+ await canvas().type( '.editor-post-title__input', titleText );
350
316
  await page.click( '.editor-post-publish-panel__toggle' );
351
317
 
352
318
  // Disable reason: Wait for the animation to complete, since otherwise the
@@ -520,81 +486,6 @@ describe( 'Links', () => {
520
486
  );
521
487
  } );
522
488
 
523
- it( 'should contain a label when it should open in a new tab', async () => {
524
- await clickBlockAppender();
525
- await page.keyboard.type( 'This is WordPress' );
526
- // Select "WordPress".
527
- await pressKeyWithModifier( 'shiftAlt', 'ArrowLeft' );
528
- await pressKeyWithModifier( 'primary', 'k' );
529
- await waitForURLFieldAutoFocus();
530
- await page.keyboard.type( 'w.org' );
531
-
532
- // Link settings open
533
- await page.keyboard.press( 'Tab' );
534
- await page.keyboard.press( 'Space' );
535
-
536
- // Navigate to and toggle the "Open in new tab" checkbox.
537
- await page.keyboard.press( 'Tab' );
538
- await page.keyboard.press( 'Space' );
539
-
540
- // Confirm that focus was not prematurely returned to the paragraph on
541
- // a changing value of the setting.
542
- await page.waitForSelector( ':focus.components-form-toggle__input' );
543
-
544
- // Submit link. Expect that "Open in new tab" would have been applied
545
- // immediately.
546
- await page.keyboard.press( 'Tab' );
547
- await page.keyboard.press( 'Enter' );
548
-
549
- // Wait for Gutenberg to finish the job.
550
- await page.waitForXPath(
551
- '//a[contains(@href,"w.org") and @target="_blank"]'
552
- );
553
-
554
- expect( await getEditedPostContent() ).toMatchSnapshot();
555
-
556
- // Regression Test: This verifies that the UI is updated according to
557
- // the expected changed values, where previously the value could have
558
- // fallen out of sync with how the UI is displayed (specifically for
559
- // collapsed selections).
560
- //
561
- // See: https://github.com/WordPress/gutenberg/pull/15573
562
-
563
- // Move caret back into the link.
564
- await page.keyboard.press( 'ArrowLeft' );
565
- await page.keyboard.press( 'ArrowLeft' );
566
-
567
- // Edit link.
568
- await pressKeyWithModifier( 'primary', 'k' );
569
- await waitForURLFieldAutoFocus();
570
- await pressKeyWithModifier( 'primary', 'a' );
571
- await page.keyboard.type( 'wordpress.org' );
572
-
573
- // Update the link.
574
- await page.keyboard.press( 'Enter' );
575
-
576
- // Navigate back to the popover.
577
- await page.keyboard.press( 'ArrowLeft' );
578
- await page.keyboard.press( 'ArrowLeft' );
579
-
580
- // Navigate back to inputs to verify appears as changed.
581
- await pressKeyWithModifier( 'primary', 'k' );
582
- await waitForURLFieldAutoFocus();
583
-
584
- // Navigate to the "Open in new tab" checkbox.
585
- await page.keyboard.press( 'Tab' );
586
- await page.keyboard.press( 'Tab' );
587
- // Uncheck the checkbox.
588
- await page.keyboard.press( 'Space' );
589
-
590
- // Wait for Gutenberg to finish the job.
591
- await page.waitForXPath(
592
- '//a[contains(@href,"wordpress.org") and not(@target)]'
593
- );
594
-
595
- expect( await getEditedPostContent() ).toMatchSnapshot();
596
- } );
597
-
598
489
  describe( 'Editing link text', () => {
599
490
  it( 'should not display text input when initially creating the link', async () => {
600
491
  // Create a block with some text.
@@ -637,11 +528,6 @@ describe( 'Links', () => {
637
528
 
638
529
  await waitForURLFieldAutoFocus();
639
530
 
640
- const [ settingsToggle ] = await page.$x(
641
- '//button[contains(@aria-label, "Link Settings")]'
642
- );
643
- await settingsToggle.click();
644
-
645
531
  await page.keyboard.press( 'Tab' );
646
532
 
647
533
  // Tabbing should land us in the text input.
@@ -699,15 +585,6 @@ describe( 'Links', () => {
699
585
 
700
586
  await editButton.click();
701
587
 
702
- await waitForURLFieldAutoFocus();
703
-
704
- const [ settingsToggle ] = await page.$x(
705
- '//button[contains(@aria-label, "Link Settings")]'
706
- );
707
- await settingsToggle.click();
708
-
709
- await page.keyboard.press( 'Tab' );
710
-
711
588
  // Tabbing back should land us in the text input.
712
589
  const textInputValue = await page.evaluate(
713
590
  () => document.activeElement.value
@@ -734,14 +611,6 @@ describe( 'Links', () => {
734
611
  '//button[contains(@aria-label, "Edit")]'
735
612
  );
736
613
  await editButton.click();
737
- await waitForURLFieldAutoFocus();
738
-
739
- const [ settingsToggle ] = await page.$x(
740
- '//button[contains(@aria-label, "Link Settings")]'
741
- );
742
- await settingsToggle.click();
743
-
744
- await page.keyboard.press( 'Tab' );
745
614
 
746
615
  // Tabbing should land us in the text input.
747
616
  const textInputValue = await page.evaluate(
@@ -762,7 +631,7 @@ describe( 'Links', () => {
762
631
  await page.keyboard.press( 'Enter' );
763
632
 
764
633
  // Check the created link reflects the link text.
765
- const actualLinkText = await page.evaluate(
634
+ const actualLinkText = await canvas().evaluate(
766
635
  () =>
767
636
  document.querySelector(
768
637
  '.block-editor-rich-text__editable a'
@@ -792,8 +661,11 @@ describe( 'Links', () => {
792
661
  );
793
662
  await settingsToggle.click();
794
663
 
664
+ // Wait for settings to open.
665
+ await page.waitForXPath( `//label[text()='Open in new tab']` );
666
+
795
667
  // Move focus back to RichText for the underlying link.
796
- await pressKeyTimes( 'Tab', 5 );
668
+ await pressKeyTimes( 'Tab', 4 );
797
669
 
798
670
  // Make a selection within the RichText.
799
671
  await pressKeyWithModifier( 'shift', 'ArrowRight' );
@@ -801,7 +673,7 @@ describe( 'Links', () => {
801
673
  await pressKeyWithModifier( 'shift', 'ArrowRight' );
802
674
 
803
675
  // Move back to the text input.
804
- await pressKeyTimes( 'Tab', 3 );
676
+ await pressKeyTimes( 'Tab', 2 );
805
677
 
806
678
  // Tabbing back should land us in the text input.
807
679
  const textInputValue = await page.evaluate(
@@ -1001,10 +873,6 @@ describe( 'Links', () => {
1001
873
 
1002
874
  await waitForURLFieldAutoFocus();
1003
875
 
1004
- // Link settings open
1005
- await page.keyboard.press( 'Tab' );
1006
- await page.keyboard.press( 'Space' );
1007
-
1008
876
  // Move to Link Text field.
1009
877
  await page.keyboard.press( 'Tab' );
1010
878
 
@@ -1013,7 +881,7 @@ describe( 'Links', () => {
1013
881
 
1014
882
  await page.keyboard.press( 'Enter' );
1015
883
 
1016
- const richTextText = await page.evaluate(
884
+ const richTextText = await canvas().evaluate(
1017
885
  () =>
1018
886
  document.querySelector(
1019
887
  '.block-editor-rich-text__editable'
@@ -1022,7 +890,7 @@ describe( 'Links', () => {
1022
890
  // Check that the correct (i.e. last) instance of "a" was replaced with "z".
1023
891
  expect( richTextText ).toBe( 'a b c z' );
1024
892
 
1025
- const richTextLink = await page.evaluate(
893
+ const richTextLink = await canvas().evaluate(
1026
894
  () =>
1027
895
  document.querySelector(
1028
896
  '.block-editor-rich-text__editable a'
@@ -20,9 +20,10 @@ describe( 'Block Toolbar', () => {
20
20
  it( 'should not scroll page', async () => {
21
21
  while (
22
22
  await page.evaluate( () => {
23
- const scrollable = wp.dom.getScrollContainer(
24
- document.activeElement
25
- );
23
+ const { activeElement } =
24
+ document.activeElement?.contentDocument ?? document;
25
+ const scrollable =
26
+ wp.dom.getScrollContainer( activeElement );
26
27
  return ! scrollable || scrollable.scrollTop === 0;
27
28
  } )
28
29
  ) {
@@ -31,21 +32,20 @@ describe( 'Block Toolbar', () => {
31
32
 
32
33
  await page.keyboard.type( 'a' );
33
34
 
34
- const scrollTopBefore = await page.evaluate(
35
- () =>
36
- wp.dom.getScrollContainer( document.activeElement )
37
- .scrollTop
38
- );
35
+ const scrollTopBefore = await page.evaluate( () => {
36
+ const { activeElement } =
37
+ document.activeElement?.contentDocument ?? document;
38
+ window.scrollContainer =
39
+ wp.dom.getScrollContainer( activeElement );
40
+ return window.scrollContainer.scrollTop;
41
+ } );
39
42
 
40
43
  await pressKeyWithModifier( 'alt', 'F10' );
41
44
  expect( await isInBlockToolbar() ).toBe( true );
42
45
 
43
- const scrollTopAfter = await page.evaluate(
44
- () =>
45
- wp.dom.getScrollContainer( document.activeElement )
46
- .scrollTop
47
- );
48
-
46
+ const scrollTopAfter = await page.evaluate( () => {
47
+ return window.scrollContainer.scrollTop;
48
+ } );
49
49
  expect( scrollTopBefore ).toBe( scrollTopAfter );
50
50
  } );
51
51
 
@@ -1,7 +1,11 @@
1
1
  /**
2
2
  * WordPress dependencies
3
3
  */
4
- import { createNewPost, clickOnMoreMenuItem } from '@wordpress/e2e-test-utils';
4
+ import {
5
+ createNewPost,
6
+ clickOnMoreMenuItem,
7
+ canvas,
8
+ } from '@wordpress/e2e-test-utils';
5
9
 
6
10
  describe( 'New User Experience (NUX)', () => {
7
11
  it( 'should show the guide to first-time users', async () => {
@@ -128,7 +132,7 @@ describe( 'New User Experience (NUX)', () => {
128
132
  await page.click( '[role="dialog"] button[aria-label="Close"]' );
129
133
 
130
134
  // Focus should be in post title field.
131
- const postTitle = await page.waitForSelector(
135
+ const postTitle = await canvas().waitForSelector(
132
136
  'h1[aria-label="Add title"'
133
137
  );
134
138
  await expect( postTitle ).toHaveFocus();
@@ -6,6 +6,7 @@ import {
6
6
  disablePrePublishChecks,
7
7
  enablePrePublishChecks,
8
8
  createNewPost,
9
+ canvas,
9
10
  } from '@wordpress/e2e-test-utils';
10
11
 
11
12
  describe( 'PostPublishButton', () => {
@@ -32,7 +33,7 @@ describe( 'PostPublishButton', () => {
32
33
  } );
33
34
 
34
35
  it( 'should be disabled when post is being saved', async () => {
35
- await page.type( '.editor-post-title__input', 'E2E Test Post' ); // Make it saveable.
36
+ await canvas().type( '.editor-post-title__input', 'E2E Test Post' ); // Make it saveable.
36
37
  expect(
37
38
  await page.$( '.editor-post-publish-button[aria-disabled="true"]' )
38
39
  ).toBeNull();
@@ -44,7 +45,7 @@ describe( 'PostPublishButton', () => {
44
45
  } );
45
46
 
46
47
  it( 'should be disabled when metabox is being saved', async () => {
47
- await page.type( '.editor-post-title__input', 'E2E Test Post' ); // Make it saveable.
48
+ await canvas().type( '.editor-post-title__input', 'E2E Test Post' ); // Make it saveable.
48
49
  expect(
49
50
  await page.$( '.editor-post-publish-button[aria-disabled="true"]' )
50
51
  ).toBeNull();
@@ -9,6 +9,7 @@ import {
9
9
  openPublishPanel,
10
10
  pressKeyWithModifier,
11
11
  publishPost,
12
+ canvas,
12
13
  } from '@wordpress/e2e-test-utils';
13
14
 
14
15
  describe( 'PostPublishPanel', () => {
@@ -28,7 +29,7 @@ describe( 'PostPublishPanel', () => {
28
29
  } );
29
30
 
30
31
  it( 'PrePublish: publish button should have the focus', async () => {
31
- await page.type( '.editor-post-title__input', 'E2E Test Post' );
32
+ await canvas().type( '.editor-post-title__input', 'E2E Test Post' );
32
33
  await openPublishPanel();
33
34
 
34
35
  const focusedElementClassList = await page.$eval(
@@ -44,7 +45,7 @@ describe( 'PostPublishPanel', () => {
44
45
 
45
46
  it( 'PostPublish: post link should have the focus', async () => {
46
47
  const postTitle = 'E2E Test Post';
47
- await page.type( '.editor-post-title__input', postTitle );
48
+ await canvas().type( '.editor-post-title__input', postTitle );
48
49
  await publishPost();
49
50
 
50
51
  const focusedElementTag = await page.$eval(
@@ -64,7 +65,7 @@ describe( 'PostPublishPanel', () => {
64
65
  } );
65
66
 
66
67
  it( 'should retain focus within the panel', async () => {
67
- await page.type( '.editor-post-title__input', 'E2E Test Post' );
68
+ await canvas().type( '.editor-post-title__input', 'E2E Test Post' );
68
69
  await openPublishPanel();
69
70
  await pressKeyWithModifier( 'shift', 'Tab' );
70
71