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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132{
"'Task 1' and 'Task 3' are removed from the list": {
"actions": [
{
"method": "expectAria",
"template": "- list:\n - listitem: Task 2",
"code": "await expect(page.locator('body')).toMatchAria(`\n- list:\n - listitem: Task 2\n`);"
}
]
},
"Add three todos: 'Task 1', 'Task 2', 'Task 3'": {
"actions": [
{
"method": "fill",
"selector": "internal:role=textbox[name=\"What needs to be done?\"i]",
"text": "Task 1",
"submit": true,
"code": "await page.getByRole('textbox', { name: 'What needs to be done?' }).fill('Task 1');\nawait page.keyboard.press('Enter');"
},
{
"method": "fill",
"selector": "internal:role=textbox[name=\"What needs to be done?\"i]",
"text": "Task 2",
"submit": true,
"code": "await page.getByRole('textbox', { name: 'What needs to be done?' }).fill('Task 2');\nawait page.keyboard.press('Enter');"
},
{
"method": "fill",
"selector": "internal:role=textbox[name=\"What needs to be done?\"i]",
"text": "Task 3",
"submit": true,
"code": "await page.getByRole('textbox', { name: 'What needs to be done?' }).fill('Task 3');\nawait page.keyboard.press('Enter');"
}
]
},
"All three todos are visible": {
"actions": [
{
"method": "expectAria",
"template": "- list:\n - listitem: Task 1\n - listitem: Task 2\n - listitem: Task 3",
"code": "await expect(page.locator('body')).toMatchAria(`\n- list:\n - listitem: Task 1\n - listitem: Task 2\n - listitem: Task 3\n`);"
}
]
},
"Click the 'Clear completed' button": {
"actions": [
{
"method": "click",
"selector": "internal:role=button[name=\"Clear completed\"i]",
"code": "await page.getByRole('button', { name: 'Clear completed' }).click();"
}
]
},
"Counter shows '1 item left'": {
"actions": [
{
"method": "expectVisible",
"selector": "internal:text=\"1 item left\"i",
"code": "await expect(page.getByText('1 item left')).toBeVisible();"
}
]
},
"Mark 'Task 1' and 'Task 3' as complete by clicking their checkboxes": {
"actions": [
{
"method": "click",
"selector": "internal:role=listitem >> internal:has-text=\"Task 1\"i >> internal:label=\"Toggle Todo\"i",
"code": "await page.getByRole('listitem').filter({ hasText: 'Task 1' }).getByLabel('Toggle Todo').click();"
},
{
"method": "click",
"selector": "internal:role=listitem >> internal:has-text=\"Task 3\"i >> internal:label=\"Toggle Todo\"i",
"code": "await page.getByRole('listitem').filter({ hasText: 'Task 3' }).getByLabel('Toggle Todo').click();"
}
]
},
"Only 'Task 2' remains visible": {
"actions": [
{
"method": "expectAria",
"template": "- list:\n - listitem: Task 2",
"code": "await expect(page.locator('body')).toMatchAria(`\n- list:\n - listitem: Task 2\n`);"
}
]
},
"The 'Clear completed' button appears": {
"actions": [
{
"method": "expectVisible",
"selector": "internal:role=button[name=\"Clear completed\"i]",
"code": "await expect(page.getByRole('button', { name: 'Clear completed' })).toBeVisible();"
}
]
},
"The 'Clear completed' button disappears": {
"actions": [
{
"method": "expectVisible",
"selector": "internal:role=button[name=\"Clear completed\"i]",
"isNot": true,
"code": "await expect(page.getByRole('button', { name: 'Clear completed' })).not.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();"
}
]
},
"Two todos are marked as complete": {
"actions": [
{
"method": "expectValue",
"selector": "internal:role=listitem >> internal:has-text=\"Task 1\"i >> internal:label=\"Toggle Todo\"i",
"type": "checkbox",
"value": "true",
"code": "await expect(page.getByRole('listitem').filter({ hasText: 'Task 1' }).getByLabel('Toggle Todo')).toBeChecked({ checked: true });"
},
{
"method": "expectValue",
"selector": "internal:role=listitem >> internal:has-text=\"Task 3\"i >> internal:label=\"Toggle Todo\"i",
"type": "checkbox",
"value": "true",
"code": "await expect(page.getByRole('listitem').filter({ hasText: 'Task 3' }).getByLabel('Toggle Todo')).toBeChecked({ checked: true });"
}
]
}
}