1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103{
"'Persistent 2' is marked as complete": {
"actions": [
{
"method": "expectValue",
"selector": "internal:role=listitem >> internal:has-text=\"Persistent 2\"i >> internal:label=\"Toggle Todo\"i",
"type": "checkbox",
"value": "true",
"code": "await expect(page.getByRole('listitem').filter({ hasText: 'Persistent 2' }).getByLabel('Toggle Todo')).toBeChecked({ checked: true });"
}
]
},
"'Persistent 2' is still marked as complete": {
"actions": [
{
"method": "expectValue",
"selector": "internal:role=listitem >> internal:has-text=\"Persistent 2\"i >> internal:label=\"Toggle Todo\"i",
"type": "checkbox",
"value": "true",
"code": "await expect(page.getByRole('listitem').filter({ hasText: 'Persistent 2' }).getByLabel('Toggle Todo')).toBeChecked({ checked: true });"
}
]
},
"Add three todos: 'Persistent 1', 'Persistent 2', 'Persistent 3'": {
"actions": [
{
"method": "fill",
"selector": "internal:role=textbox[name=\"What needs to be done?\"i]",
"text": "Persistent 1",
"submit": true,
"code": "await page.getByRole('textbox', { name: 'What needs to be done?' }).fill('Persistent 1');\nawait page.keyboard.press('Enter');"
},
{
"method": "fill",
"selector": "internal:role=textbox[name=\"What needs to be done?\"i]",
"text": "Persistent 2",
"submit": true,
"code": "await page.getByRole('textbox', { name: 'What needs to be done?' }).fill('Persistent 2');\nawait page.keyboard.press('Enter');"
},
{
"method": "fill",
"selector": "internal:role=textbox[name=\"What needs to be done?\"i]",
"text": "Persistent 3",
"submit": true,
"code": "await page.getByRole('textbox', { name: 'What needs to be done?' }).fill('Persistent 3');\nawait page.keyboard.press('Enter');"
}
]
},
"All three todos appear in the list": {
"actions": [
{
"method": "expectAria",
"template": "- list:\n - listitem: Persistent 1\n - listitem: Persistent 2\n - listitem: Persistent 3",
"code": "await expect(page.locator('body')).toMatchAria(`\n- list:\n - listitem: Persistent 1\n - listitem: Persistent 2\n - listitem: Persistent 3\n`);"
}
]
},
"All three todos are still present after reload": {
"actions": [
{
"method": "expectAria",
"template": "- list:\n - listitem: Persistent 1\n - listitem: Persistent 2\n - listitem: Persistent 3",
"code": "await expect(page.locator('body')).toMatchAria(`\n- list:\n - listitem: Persistent 1\n - listitem: Persistent 2\n - listitem: Persistent 3\n`);"
}
]
},
"Mark 'Persistent 2' as completed by clicking its checkbox": {
"actions": [
{
"method": "click",
"selector": "internal:role=listitem >> internal:has-text=\"Persistent 2\"i >> internal:label=\"Toggle Todo\"i",
"code": "await page.getByRole('listitem').filter({ hasText: 'Persistent 2' }).getByLabel('Toggle Todo').click();"
}
]
},
"Reload the page": {
"actions": [
{
"method": "pressKey",
"key": "F5",
"code": "await page.keyboard.press('F5');"
}
]
},
"The counter shows '2 items left'": {
"actions": [
{
"method": "expectVisible",
"selector": "internal:text=\"2 items left\"i",
"code": "await expect(page.getByText('2 items left')).toBeVisible();"
}
]
},
"The page loads with an empty todo list": {
"actions": [
{
"method": "expectVisible",
"selector": "internal:role=textbox[name=\"What needs to be done?\"i]",
"code": "await expect(page.getByRole('textbox', { name: 'What needs to be done?' })).toBeVisible();"
}
]
}
}