Skip to content

Commit efdb62f

Browse files
christopherthielenchristopherthielen
committed
refactor: switch from cypress to playwright
1 parent 90752f6 commit efdb62f

File tree

5 files changed

+532
-2166
lines changed

5 files changed

+532
-2166
lines changed

‎cypress/e2e/sample_app.cy.js‎

Lines changed: 0 additions & 202 deletions
This file was deleted.

‎e2e/sample-app.spec.js‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
const { test, expect } = require('@playwright/test');
2+
3+
const EMAIL_ADDRESS = 'myself@angular.dev';
4+
5+
test.describe('unauthenticated sample app', () => {
6+
test.beforeEach(async ({ page }) => {
7+
// Navigate first, then clear sessionStorage
8+
await page.goto('/');
9+
await page.evaluate(() => window.sessionStorage.clear());
10+
});
11+
12+
test('loads', async ({ page }) => {
13+
await page.goto('/');
14+
});
15+
16+
test('renders home', async ({ page }) => {
17+
await page.goto('/#/home');
18+
await expect(page.getByRole('button', { name: 'Messages' })).toBeVisible();
19+
await expect(page.getByRole('button', { name: 'Contacts' })).toBeVisible();
20+
await expect(page.getByRole('button', { name: 'Preferences' })).toBeVisible();
21+
});
22+
23+
test('asks for authentication', async ({ page }) => {
24+
await page.goto('/#/home');
25+
await page.getByRole('button', { name: 'Preferences' }).click();
26+
27+
await expect(page.getByRole('heading', { name: 'Log In' })).toBeVisible();
28+
// Hybrid app uses AngularJS template with select#username and input[name="password"]
29+
await expect(page.locator('select#username')).toBeVisible();
30+
await expect(page.locator('label[for="password"]')).toBeVisible();
31+
32+
const appConfig = await page.evaluate(() => sessionStorage.getItem('appConfig'));
33+
expect(appConfig).toBeNull();
34+
});
35+
36+
test('can authenticate', async ({ page }) => {
37+
await page.goto('/#/prefs');
38+
39+
const appConfigBefore = await page.evaluate(() => sessionStorage.getItem('appConfig'));
40+
expect(appConfigBefore).toBeNull();
41+
42+
await expect(page.getByRole('heading', { name: 'Log In' })).toBeVisible();
43+
await expect(page.locator('select#username')).toBeVisible();
44+
await expect(page.locator('label[for="password"]')).toBeVisible();
45+
46+
await page.locator('select#username').selectOption(EMAIL_ADDRESS);
47+
await page.getByRole('button', { name: 'Log in' }).click();
48+
49+
await expect(page.getByText('Reset All Data')).toBeVisible();
50+
51+
const appConfig = await page.evaluate(() => sessionStorage.getItem('appConfig'));
52+
expect(appConfig).not.toBeNull();
53+
});
54+
});
55+
56+
test.describe('authenticated sample app', () => {
57+
test.beforeEach(async ({ page }) => {
58+
// Login for each test since Playwright runs with fresh browser state
59+
await page.goto('/#/login');
60+
await page.locator('select#username').selectOption(EMAIL_ADDRESS);
61+
await page.getByRole('button', { name: 'Log in' }).click();
62+
// Hybrid app redirects to /welcome or /home depending on navigation context
63+
await expect(page).toHaveURL(/#\/(home|welcome)/);
64+
});
65+
66+
test('navigates to Preferences by url', async ({ page }) => {
67+
await page.goto('/#/prefs');
68+
await expect(page.getByText('Reset All Data')).toBeVisible();
69+
});
70+
71+
test('navigates to Contacts by url', async ({ page }) => {
72+
await page.goto('/#/contacts');
73+
await expect(page.getByText('Select a contact')).toBeVisible();
74+
});
75+
76+
test('navigates to Messages by url', async ({ page }) => {
77+
await page.goto('/#/mymessages');
78+
await expect(page.locator('table').getByText('Sender')).toBeVisible();
79+
await expect(page.locator('table').getByText('Subject')).toBeVisible();
80+
});
81+
82+
test('can send a message', async ({ page }) => {
83+
await page.goto('/#/mymessages');
84+
await expect(page).toHaveURL(/#\/mymessages\/inbox/);
85+
86+
await page.getByText('New Message').click();
87+
await expect(page).toHaveURL(/#\/mymessages\/compose/);
88+
89+
await page.locator('input#to').fill('somebody@somewhere.com');
90+
await page.locator('input#subject').fill('Hello World');
91+
await page.locator('textarea#body').fill('The quick brown fox jumps over the lazy dog');
92+
await page.getByRole('button', { name: 'Send' }).click();
93+
94+
await expect(page.getByText('Sender')).toBeVisible();
95+
await page.locator('li a').getByText('sent').click();
96+
await expect(page.getByText('Hello World')).toBeVisible();
97+
await expect(page.locator('table').getByText('Hello World')).toBeVisible();
98+
await expect(page.locator('table').getByText('somebody@somewhere.com')).toBeVisible();
99+
});
100+
101+
test('can save a draft', async ({ page }) => {
102+
await page.goto('/#/mymessages');
103+
await expect(page).toHaveURL(/#\/mymessages\/inbox/);
104+
105+
await page.getByText('New Message').click();
106+
await page.locator('input#to').fill('somebody@somewhere.com');
107+
await page.locator('input#subject').fill('Hello World');
108+
await page.locator('textarea#body').fill('The quick brown fox jumps over the lazy dog');
109+
await page.getByRole('button', { name: 'Draft' }).click();
110+
111+
await expect(page.getByText('Sender')).toBeVisible();
112+
await page.locator('li a').getByText('drafts').click();
113+
await expect(page.getByText('Hello World')).toBeVisible();
114+
await expect(page.locator('table').getByText('Hello World')).toBeVisible();
115+
await expect(page.locator('table').getByText('somebody@somewhere.com')).toBeVisible();
116+
});
117+
118+
test('prompts to save a message being composed', async ({ page }) => {
119+
await page.goto('/#/mymessages');
120+
await expect(page).toHaveURL(/#\/mymessages\/inbox/);
121+
122+
await page.getByText('New Message').click();
123+
await page.locator('input#to').fill('somebody@somewhere.com');
124+
await page.getByRole('button', { name: 'Cancel' }).click();
125+
126+
await expect(page.locator('.backdrop')).toBeVisible();
127+
await expect(page.getByText('Navigate away')).toBeVisible();
128+
await page.getByRole('button', { name: 'No' }).click();
129+
await expect(page.locator('.backdrop')).not.toBeVisible();
130+
await expect(page).toHaveURL(/#\/mymessages\/compose/);
131+
132+
await page.getByRole('button', { name: 'Cancel' }).click();
133+
await expect(page.locator('.backdrop')).toBeVisible();
134+
await expect(page.getByText('Navigate away')).toBeVisible();
135+
await page.getByRole('button', { name: 'Yes' }).click();
136+
await expect(page.locator('.backdrop')).not.toBeVisible();
137+
138+
await expect(page.getByText('Sender')).toBeVisible();
139+
await expect(page.getByText('Subject')).toBeVisible();
140+
await expect(page).toHaveURL(/#\/mymessages\/inbox/);
141+
});
142+
143+
test('navigates through folders', async ({ page }) => {
144+
await page.goto('/#/mymessages');
145+
await expect(page).toHaveURL(/#\/mymessages\/inbox/);
146+
147+
await expect(page.locator('li.selected').getByText('inbox')).toBeVisible();
148+
await expect(page.getByText('Longer in style')).toBeVisible();
149+
150+
await page.getByText('finance').click();
151+
await expect(page.locator('li.selected').getByText('finance')).toBeVisible();
152+
await expect(page.getByText('You look angerly')).toBeVisible();
153+
await expect(page).toHaveURL(/#\/mymessages\/finance/);
154+
155+
await page.getByText('travel').click();
156+
await expect(page.locator('li.selected').getByText('travel')).toBeVisible();
157+
await expect(page.getByText('In areas of lush forest')).toBeVisible();
158+
await expect(page).toHaveURL(/#\/mymessages\/travel/);
159+
160+
await page.getByText('personal').click();
161+
await expect(page.locator('li.selected').getByText('personal')).toBeVisible();
162+
await expect(page.getByText('Mother is not all')).toBeVisible();
163+
await expect(page).toHaveURL(/#\/mymessages\/personal/);
164+
});
165+
166+
test('navigates through messages', async ({ page }) => {
167+
const selectMessage = async (subject, guid) => {
168+
await page.getByText(subject).click();
169+
await expect(page).toHaveURL(new RegExp(guid));
170+
await expect(page.locator('.message h4').getByText(subject)).toBeVisible();
171+
};
172+
173+
await page.goto('/#/mymessages/finance');
174+
await expect(page.locator('li.selected').getByText('finance')).toBeVisible();
175+
176+
await selectMessage('You look angerly', '5648b50cf8ea6dfc7d1a40a8');
177+
await selectMessage('Historical change consequent', '5648b50c66b80016c9acc467');
178+
await selectMessage('The gracious Duncan', '5648b50d05f033d24fe5a1a2');
179+
await selectMessage('Rings, does not die', '5648b50c8e0e098cef934e04');
180+
});
181+
182+
test('navigates through contacts', async ({ page }) => {
183+
await page.goto('/#/contacts');
184+
185+
const selectContact = async (name, id) => {
186+
await page.locator('li').getByText(name).click();
187+
await expect(page).toHaveURL(new RegExp(id));
188+
await expect(page.locator('a.selected').getByText(name)).toBeVisible();
189+
await expect(page.locator('.contact h3').getByText(name)).toBeVisible();
190+
};
191+
192+
await selectContact('Rios Sears', 'rsears');
193+
await selectContact('Delia Hunter', 'dhunter');
194+
await selectContact('Underwood Owens', 'uowens');
195+
});
196+
});

0 commit comments

Comments
 (0)