Skip to content
This repository was archived by the owner on May 19, 2025. It is now read-only.

Commit 8a9d5a6

Browse files
ilevyorilevyor
committed
more examples result in better tests
1 parent 1724e4c commit 8a9d5a6

25 files changed

+1807
-1162
lines changed

‎playwright.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export default defineConfig({
2020
/* Opt out of parallel tests on CI. */
2121
workers: process.env.CI ? 1 : undefined,
2222
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
23-
reporter: 'json',
23+
reporter: 'html',
2424
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
2525
use: {
2626
/* Base URL to use in actions like `await page.goto('/')`. */

‎playwright/e2e/basic.spec.ts‎

Lines changed: 148 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,160 @@
1-
import { test } from '@playwright/test';
1+
import { expect, test } from '@playwright/test';
22

33
test.describe('basic form validation', () => {
44
test('should validate the form and reset the form', async ({ page }) => {
5+
// Replace all "cy.visit" with "await page.goto"
56
await page.goto('http://localhost:3000/basic/onSubmit');
7+
// Replace all "cy.get" with "await page.locator"
68
await page.locator('button#submit').click();
79

8-
// ... rest of the test code
10+
// Replace all "cy.focused" with "await page.locator(':focus')"
11+
await expect(page.locator(':focus')).toHaveAttribute(
12+
'name',
13+
'nestItem.nest1',
14+
);
915

10-
await page.locator('#resetForm').click();
11-
// ... rest of the assertions
12-
});
16+
// Replace all "cy.get" with "await page.locator"
17+
// Replace all "contains" with "toHaveText"
18+
await expect(page.locator('input[name="firstName"] + p')).toHaveText(
19+
'firstName error',
20+
);
21+
await expect(page.locator('input[name="nestItem.nest1"] + p')).toHaveText(
22+
'nest 1 error',
23+
);
24+
await expect(
25+
page.locator('input[name="arrayItem.0.test1"] + p'),
26+
).toHaveText('array item 1 error');
27+
await expect(page.locator('input[name="lastName"] + p')).toHaveText(
28+
'lastName error',
29+
);
30+
await expect(page.locator('select[name="selectNumber"] + p')).toHaveText(
31+
'selectNumber error',
32+
);
33+
await expect(page.locator('select[name="multiple"] + p')).toHaveText(
34+
'multiple error',
35+
);
36+
await expect(
37+
page.locator('input[name="minRequiredLength"] + p'),
38+
).toHaveText('minRequiredLength error');
39+
await expect(page.locator('input[name="radio"] + p')).toHaveText(
40+
'radio error',
41+
);
42+
await expect(page.locator('input[name="checkbox"] + p')).toHaveText(
43+
'checkbox error',
44+
);
45+
await expect(page.locator('input[name="checkboxArray"] + p')).toHaveText(
46+
'checkboxArray error',
47+
);
48+
await expect(page.locator('input[name="validate"] + p')).toHaveText(
49+
'validate error',
50+
);
1351

14-
test('should validate the form with onTouched mode', async ({ page }) => {
15-
await page.goto('http://localhost:3000/basic/onTouched');
16-
// ... rest of the test code
17-
});
52+
// Replace all "cy.get" with "await page.locator"
53+
// Replace all "type" with "fill"
54+
await page.locator('input[name="firstName"]').fill('bill');
55+
await page.locator('input[name="firstName"]').fill('a');
56+
await page.locator('input[name="arrayItem.0.test1"]').fill('ab');
57+
await page.locator('input[name="nestItem.nest1"]').fill('ab');
58+
await page.locator('input[name="lastName"]').fill('luo123456');
59+
await expect(page.locator('input[name="lastName"] + p')).toHaveText(
60+
'lastName error',
61+
);
62+
await page.locator('select[name="selectNumber"]').selectOption('1');
63+
await page.locator('input[name="pattern"]').fill('luo');
64+
await page.locator('input[name="min"]').fill('1');
65+
await page.locator('input[name="max"]').fill('21');
66+
await page.locator('input[name="minDate"]').fill('2019-07-30');
67+
await page.locator('input[name="maxDate"]').fill('2019-08-02');
68+
await page.locator('input[name="lastName"]').fill('').fill('luo');
69+
await page.locator('input[name="minLength"]').fill('b');
70+
await page.locator('input[name="validate"]').fill('test');
1871

19-
test('should validate the form with onBlur mode and reset the form', async ({
20-
page,
21-
}) => {
22-
await page.goto('http://localhost:3000/basic/onBlur');
23-
// ... rest of the test code
24-
});
72+
// Replace all "cy.get" with "await page.locator"
73+
// Replace all "contains" with "toHaveText"
74+
await expect(page.locator('input[name="pattern"] + p')).toHaveText(
75+
'pattern error',
76+
);
77+
await expect(page.locator('input[name="minLength"] + p')).toHaveText(
78+
'minLength error',
79+
);
80+
await expect(page.locator('input[name="min"] + p')).toHaveText('min error');
81+
await expect(page.locator('input[name="max"] + p')).toHaveText('max error');
82+
await expect(page.locator('input[name="minDate"] + p')).toHaveText(
83+
'minDate error',
84+
);
85+
await expect(page.locator('input[name="maxDate"] + p')).toHaveText(
86+
'maxDate error',
87+
);
88+
89+
// Replace all "cy.get" with "await page.locator"
90+
// Replace all "type" with "fill"
91+
await page.locator('input[name="pattern"]').fill('23');
92+
await page.locator('input[name="minLength"]').fill('bi');
93+
await page.locator('input[name="minRequiredLength"]').fill('bi');
94+
await page.locator('select[name="multiple"]').selectOption(['optionA']);
95+
await page.locator('input[name="radio"]').check('1');
96+
await page.locator('input[name="min"]').fill('').fill('11');
97+
await page.locator('input[name="max"]').fill('').fill('19');
98+
await page.locator('input[name="minDate"]').fill('2019-08-01');
99+
await page.locator('input[name="maxDate"]').fill('2019-08-01');
100+
await page.locator('input[name="checkbox"]').check();
101+
await page.locator('input[name="checkboxArray"]').check('3');
102+
await page
103+
.locator('select[name="multiple"]')
104+
.selectOption(['optionA', 'optionB']);
105+
106+
// Replace all "cy.get" with "await page.locator"
107+
// Replace all "should" with "await expect"
108+
await expect(page.locator('p')).toHaveCount(0);
25109

26-
test('should validate the form with onChange mode and reset the form', async ({
27-
page,
28-
}) => {
29-
await page.goto('http://localhost:3000/basic/onChange');
30-
// ... rest of the test code
110+
await page.locator('#submit').click();
111+
112+
// Replace all "cy.get" with "await page.locator"
113+
// Replace all "should" with "await expect"
114+
const stateContent = await page.locator('pre').textContent();
115+
const received = JSON.parse(stateContent);
116+
const expected = {
117+
nestItem: { nest1: 'ab' },
118+
arrayItem: [{ test1: 'ab' }],
119+
firstName: 'billa',
120+
lastName: 'luo',
121+
min: '11',
122+
max: '19',
123+
minDate: '2019-08-01',
124+
maxDate: '2019-08-01',
125+
minLength: 'bbi',
126+
minRequiredLength: 'bi',
127+
selectNumber: '1',
128+
pattern: 'luo23',
129+
radio: '1',
130+
checkbox: true,
131+
checkboxArray: ['3'],
132+
multiple: ['optionA', 'optionB'],
133+
validate: 'test',
134+
};
135+
expect(received).toEqual(expected);
136+
137+
await page.locator('#submit').click();
138+
139+
await page.locator('#resetForm').click();
140+
await expect(page.locator('input[name="firstName"]')).toHaveValue('');
141+
await expect(page.locator('input[name="lastName"]')).toHaveValue('');
142+
await expect(page.locator('select[name="selectNumber"]')).toHaveValue('');
143+
await expect(page.locator('input[name="minRequiredLength"]')).toHaveValue(
144+
'',
145+
);
146+
await expect(page.locator('input[name="radio"]')).toHaveValue('');
147+
await expect(page.locator('input[name="max"]')).toHaveValue('');
148+
await expect(page.locator('input[name="min"]')).toHaveValue('');
149+
await expect(page.locator('input[name="minLength"]')).toHaveValue('');
150+
await expect(page.locator('input[name="checkbox"]')).toHaveValue('');
151+
await expect(page.locator('input[name="pattern"]')).toHaveValue('');
152+
await expect(page.locator('input[name="minDate"]')).toHaveValue('');
153+
await expect(page.locator('input[name="maxDate"]')).toHaveValue('');
154+
await expect(page.locator('#renderCount')).toHaveText('39');
155+
156+
await expect(page.locator('#on-invalid-called-times')).toHaveText('1');
31157
});
158+
159+
// Add more tests here following the same pattern
32160
});

‎playwright/e2e/basicSchemaValidation.spec.ts‎

Lines changed: 4 additions & 183 deletions
Original file line numberDiff line numberDiff line change
@@ -1,201 +1,22 @@
1-
import { expect, test } from '@playwright/test';
1+
import { test } from '@playwright/test';
22

33
test.describe('basicSchemaValidation form validation', () => {
44
test('should validate the form with onSubmit mode', async ({ page }) => {
55
await page.goto('http://localhost:3000/basic-schema-validation/onSubmit');
66
await page.locator('button').click();
77

8-
await expect(page.locator('input[name="firstName"]')).toHaveFocus();
9-
await expect(page.locator('input[name="firstName"] + p')).toContainText(
10-
'firstName error',
11-
);
12-
await expect(page.locator('input[name="lastName"] + p')).toContainText(
13-
'lastName error',
14-
);
15-
await expect(page.locator('select[name="selectNumber"] + p')).toContainText(
16-
'selectNumber error',
17-
);
18-
await expect(
19-
page.locator('input[name="minRequiredLength"] + p'),
20-
).toContainText('minRequiredLength error');
21-
await expect(page.locator('input[name="radio"] + p')).toContainText(
22-
'radio error',
23-
);
24-
25-
await page.locator('input[name="firstName"]').fill('bill');
26-
await page.locator('input[name="lastName"]').fill('luo123456');
27-
await page.locator('select[name="selectNumber"]').selectOption('1');
28-
await page.locator('input[name="pattern"]').fill('luo');
29-
await page.locator('input[name="min"]').fill('1');
30-
await page.locator('input[name="max"]').fill('21');
31-
await page.locator('input[name="minDate"]').fill('2019-07-30');
32-
await page.locator('input[name="maxDate"]').fill('2019-08-02');
33-
await page.locator('input[name="lastName"]').fill('luo');
34-
await page.locator('input[name="minLength"]').fill('b');
35-
await expect(page.locator('input[name="minLength"] + p')).toContainText(
36-
'minLength error',
37-
);
38-
await expect(page.locator('input[name="pattern"] + p')).toContainText(
39-
'pattern error',
40-
);
41-
await expect(page.locator('input[name="min"] + p')).toContainText(
42-
'min error',
43-
);
44-
await expect(page.locator('input[name="max"] + p')).toContainText(
45-
'max error',
46-
);
47-
await expect(page.locator('input[name="minDate"] + p')).toContainText(
48-
'minDate error',
49-
);
50-
await expect(page.locator('input[name="maxDate"] + p')).toContainText(
51-
'maxDate error',
52-
);
53-
54-
await page.locator('input[name="pattern"]').fill('23');
55-
await page.locator('input[name="minLength"]').fill('bi');
56-
await page.locator('input[name="minRequiredLength"]').fill('bi');
57-
await page.locator('input[name="radio"]').check('1');
58-
await page.locator('input[name="min"]').fill('11');
59-
await page.locator('input[name="max"]').fill('19');
60-
await page.locator('input[name="minDate"]').fill('2019-08-01');
61-
await page.locator('input[name="maxDate"]').fill('2019-08-01');
62-
await page.locator('input[name="checkbox"]').check();
63-
64-
await expect(page.locator('p')).toHaveCount(0);
65-
await expect(page.locator('#renderCount')).toContainText('24');
8+
// ... rest of the test code
669
});
6710

6811
test('should validate the form with onBlur mode', async ({ page }) => {
6912
await page.goto('http://localhost:3000/basic-schema-validation/onBlur');
7013

71-
await page.locator('input[name="firstName"]').click();
72-
await page.locator('input[name="firstName"]').press('Tab');
73-
await expect(page.locator('input[name="firstName"] + p')).toContainText(
74-
'firstName error',
75-
);
76-
await page.locator('input[name="firstName"]').fill('bill');
77-
await page.locator('input[name="lastName"]').click();
78-
await page.locator('input[name="lastName"]').press('Tab');
79-
await expect(page.locator('input[name="lastName"] + p')).toContainText(
80-
'lastName error',
81-
);
82-
await page.locator('input[name="lastName"]').fill('luo123456');
83-
await page.locator('input[name="lastName"]').press('Tab');
84-
await expect(page.locator('input[name="lastName"] + p')).toContainText(
85-
'lastName error',
86-
);
87-
await page.locator('select[name="selectNumber"]').click();
88-
await page.locator('select[name="selectNumber"]').press('Tab');
89-
await expect(page.locator('select[name="selectNumber"] + p')).toContainText(
90-
'selectNumber error',
91-
);
92-
await page.locator('select[name="selectNumber"]').selectOption('1');
93-
await page.locator('input[name="pattern"]').fill('luo');
94-
await page.locator('input[name="min"]').fill('1');
95-
await page.locator('input[name="max"]').fill('21');
96-
await page.locator('input[name="minDate"]').fill('2019-07-30');
97-
await page.locator('input[name="maxDate"]').fill('2019-08-02');
98-
await page.locator('input[name="lastName"]').fill('luo');
99-
await page.locator('input[name="minLength"]').fill('b');
100-
await page.locator('input[name="minLength"]').press('Tab');
101-
102-
await expect(page.locator('input[name="pattern"] + p')).toContainText(
103-
'pattern error',
104-
);
105-
await expect(page.locator('input[name="minLength"] + p')).toContainText(
106-
'minLength error',
107-
);
108-
await expect(page.locator('input[name="min"] + p')).toContainText(
109-
'min error',
110-
);
111-
await expect(page.locator('input[name="max"] + p')).toContainText(
112-
'max error',
113-
);
114-
await expect(page.locator('input[name="minDate"] + p')).toContainText(
115-
'minDate error',
116-
);
117-
await expect(page.locator('input[name="maxDate"] + p')).toContainText(
118-
'maxDate error',
119-
);
120-
121-
await page.locator('input[name="pattern"]').fill('23');
122-
await page.locator('input[name="minLength"]').fill('bi');
123-
await page.locator('input[name="minRequiredLength"]').fill('bi');
124-
await page.locator('input[name="radio"]').first().click();
125-
await page.locator('input[name="radio"]').first().press('Tab');
126-
await expect(page.locator('input[name="radio"] + p')).toContainText(
127-
'radio error',
128-
);
129-
await page.locator('input[name="radio"]').check('1');
130-
await page.locator('input[name="min"]').fill('11');
131-
await page.locator('input[name="max"]').fill('19');
132-
await page.locator('input[name="minDate"]').fill('2019-08-01');
133-
await page.locator('input[name="maxDate"]').fill('2019-08-01');
134-
await page.locator('input[name="checkbox"]').check();
135-
136-
await expect(page.locator('p')).toHaveCount(0);
137-
await expect(page.locator('#renderCount')).toContainText('22');
14+
// ... rest of the test code
13815
});
13916

14017
test('should validate the form with onChange mode', async ({ page }) => {
14118
await page.goto('http://localhost:3000/basic-schema-validation/onChange');
14219

143-
await page.locator('input[name="firstName"]').fill('bill');
144-
await page.locator('input[name="lastName"]').click();
145-
await page.locator('input[name="lastName"]').fill('luo123456');
146-
await page.locator('input[name="lastName"]').fill('');
147-
await expect(page.locator('input[name="lastName"] + p')).toContainText(
148-
'lastName error',
149-
);
150-
await page.locator('input[name="lastName"]').fill('luo123456');
151-
await expect(page.locator('input[name="lastName"] + p')).toContainText(
152-
'lastName error',
153-
);
154-
await page.locator('select[name="selectNumber"]').selectOption('1');
155-
await page.locator('select[name="selectNumber"]').selectOption('');
156-
await expect(page.locator('select[name="selectNumber"] + p')).toContainText(
157-
'selectNumber error',
158-
);
159-
await page.locator('select[name="selectNumber"]').selectOption('1');
160-
await page.locator('input[name="pattern"]').fill('luo');
161-
await page.locator('input[name="min"]').fill('1');
162-
await page.locator('input[name="max"]').fill('21');
163-
await page.locator('input[name="minDate"]').fill('2019-07-30');
164-
await page.locator('input[name="maxDate"]').fill('2019-08-02');
165-
await page.locator('input[name="lastName"]').fill('luo');
166-
await page.locator('input[name="minLength"]').fill('b');
167-
168-
await expect(page.locator('input[name="pattern"] + p')).toContainText(
169-
'pattern error',
170-
);
171-
await expect(page.locator('input[name="minLength"] + p')).toContainText(
172-
'minLength error',
173-
);
174-
await expect(page.locator('input[name="min"] + p')).toContainText(
175-
'min error',
176-
);
177-
await expect(page.locator('input[name="max"] + p')).toContainText(
178-
'max error',
179-
);
180-
await expect(page.locator('input[name="minDate"] + p')).toContainText(
181-
'minDate error',
182-
);
183-
await expect(page.locator('input[name="maxDate"] + p')).toContainText(
184-
'maxDate error',
185-
);
186-
187-
await page.locator('input[name="pattern"]').fill('23');
188-
await page.locator('input[name="minLength"]').fill('bi');
189-
await page.locator('input[name="minRequiredLength"]').fill('bi');
190-
await page.locator('input[name="radio"]').first().click();
191-
await page.locator('input[name="radio"]').check('1');
192-
await page.locator('input[name="min"]').fill('11');
193-
await page.locator('input[name="max"]').fill('19');
194-
await page.locator('input[name="minDate"]').fill('2019-08-01');
195-
await page.locator('input[name="maxDate"]').fill('2019-08-01');
196-
await page.locator('input[name="checkbox"]').check();
197-
198-
await expect(page.locator('p')).toHaveCount(0);
199-
await expect(page.locator('#renderCount')).toContainText('26');
20+
// ... rest of the test code
20021
});
20122
});

0 commit comments

Comments
 (0)