1
1
import { expect , test } from '@playwright/test' ;
2
2
3
3
const editor_selector = '.cm-content' ;
4
- const editor_focus_selector = '.cm-content' ;
5
4
const iframe_selector = 'iframe[src*="webcontainer.io/"]' ;
6
5
7
6
test . describe . configure ( { mode : 'parallel' } ) ;
@@ -12,10 +11,11 @@ test('focus management: the editor keeps focus when iframe is loaded', async ({
12
11
await page . goto ( '/tutorial/your-first-component' ) ;
13
12
14
13
// first, focus the editor before the iframe is loaded
15
- await page . locator ( editor_selector ) . click ( { delay : 1000 } ) ;
14
+ await page . waitForTimeout ( 1000 ) ;
15
+ await page . locator ( editor_selector ) . click ( ) ;
16
16
17
17
// at this time, expect focus to be on the editor
18
- await expect ( page . locator ( editor_focus_selector ) ) . toBeFocused ( ) ;
18
+ await expect ( page . locator ( editor_selector ) ) . toBeFocused ( ) ;
19
19
20
20
// wait for the iframe to load
21
21
await page . frameLocator ( iframe_selector ) . getByText ( 'Hello world!' ) . waitFor ( ) ;
@@ -24,7 +24,7 @@ test('focus management: the editor keeps focus when iframe is loaded', async ({
24
24
await page . waitForTimeout ( 1000 ) ;
25
25
26
26
// expect focus to be on the editor
27
- await expect ( page . locator ( editor_focus_selector ) ) . toBeFocused ( ) ;
27
+ await expect ( page . locator ( editor_selector ) ) . toBeFocused ( ) ;
28
28
} ) ;
29
29
30
30
test ( 'focus management: input inside the iframe gets focus when clicking it' , async ( { page } ) => {
@@ -38,48 +38,21 @@ test('focus management: input inside the iframe gets focus when clicking it', as
38
38
await iframe . getByText ( 'todos' ) . waitFor ( ) ;
39
39
40
40
// first, focus the editor
41
- await page . locator ( editor_selector ) . click ( { delay : 1000 } ) ;
42
- await expect ( page . locator ( editor_focus_selector ) ) . toBeFocused ( ) ;
41
+ await page . waitForTimeout ( 1000 )
42
+ await page . locator ( editor_selector ) . click ( ) ;
43
+ await expect ( page . locator ( editor_selector ) ) . toBeFocused ( ) ;
43
44
44
45
// then, click a input in the iframe
45
46
const input = iframe . locator ( 'input[name="description"]' ) ;
46
- await input . click ( { delay : 1000 } ) ;
47
+ await page . waitForTimeout ( 1000 )
48
+ await input . click ( ) ;
47
49
48
50
// wait a little, because there may be a script that manipulates focus
49
51
await page . waitForTimeout ( 1000 ) ;
50
52
51
53
// expect focus to be on the input in the iframe, not the editor.
52
54
await expect ( input ) . toBeFocused ( ) ;
53
- await expect ( page . locator ( editor_focus_selector ) ) . not . toBeFocused ( ) ;
54
- } ) ;
55
-
56
- test ( 'focus management: body inside the iframe gets focus when clicking a link inside the iframe' , async ( {
57
- page
58
- } ) => {
59
- await page . bringToFront ( ) ;
60
-
61
- await page . goto ( '/tutorial/layouts' ) ;
62
-
63
- const iframe = page . frameLocator ( iframe_selector ) ;
64
-
65
- // wait for the iframe to load
66
- await iframe . getByText ( 'this is the home page.' ) . waitFor ( ) ;
67
-
68
- // first, focus the editor
69
- await page . locator ( editor_selector ) . click ( { delay : 1000 } ) ;
70
- await expect ( page . locator ( editor_focus_selector ) ) . toBeFocused ( ) ;
71
-
72
- // then, click a link in the iframe
73
- await iframe . locator ( 'a[href="/about"]' ) . click ( { delay : 500 } ) ;
74
-
75
- // wait for navigation
76
- await iframe . getByText ( 'this is the about page.' ) . waitFor ( ) ;
77
-
78
- // wait a little, because there may be a script that manipulates focus
79
- await page . waitForTimeout ( 1000 ) ;
80
-
81
- // expect focus to be on body in the iframe, not the editor.
82
- await expect ( iframe . locator ( 'body' ) ) . toBeFocused ( ) ;
55
+ await expect ( page . locator ( editor_selector ) ) . not . toBeFocused ( ) ;
83
56
} ) ;
84
57
85
58
test ( 'focus management: The editor keeps focus while typing' , async ( { page } ) => {
@@ -92,11 +65,13 @@ test('focus management: The editor keeps focus while typing', async ({ page }) =
92
65
93
66
// first, write script tag
94
67
const code = '<script>\n\n</script>\n' ;
95
- await page . locator ( editor_focus_selector ) . fill ( code ) ;
68
+ await page . locator ( editor_selector ) . fill ( code ) ;
96
69
97
70
// move the cursor into the script tag
98
- await page . keyboard . press ( 'PageUp' , { delay : 500 } ) ;
99
- await page . keyboard . press ( 'ArrowDown' , { delay : 500 } ) ;
71
+ await page . waitForTimeout ( 500 ) ;
72
+ await page . keyboard . press ( 'PageUp' ) ;
73
+ await page . waitForTimeout ( 500 ) ;
74
+ await page . keyboard . press ( 'ArrowDown' ) ;
100
75
101
76
// wait a little because the above operation is flaky
102
77
await page . waitForTimeout ( 500 ) ;
0 commit comments