Skip to content

Commit f9bef50

Browse files
danieldanieleckidanieldanielecki
authored
Merge pull request #10 from Raboro/feat/playwright-e2e
Feat/playwright e2e - added playwright dep with config and two basic tests
2 parents b6e74e9 + 5c262bc commit f9bef50

File tree

8 files changed

+240
-9
lines changed

8 files changed

+240
-9
lines changed

‎.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,3 +36,8 @@ yarn-error.log*
3636
# typescript
3737
*.tsbuildinfo
3838
next-env.d.ts
39+
40+
/test-results/
41+
/playwright-report/
42+
/blob-report/
43+
/playwright/.cache/

‎jest.config.js‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
const nextJest = require('next/jest')
1+
const nextJest = require("next/jest");
22

33
const createJestConfig = nextJest({
4-
dir: './',
5-
})
4+
dir: "./",
5+
});
66

77
/** @type {import('jest'.Config)} */
88
const config = {
9-
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
10-
testEnvironment: 'jest-environment-jsdom',
11-
preset: 'ts-jest',
12-
}
9+
setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
10+
testEnvironment: "jest-environment-jsdom",
11+
testPathIgnorePatterns: ["playwright"],
12+
preset: "ts-jest",
13+
};
1314

14-
module.exports = createJestConfig(config)
15+
module.exports = createJestConfig(config);

‎package-lock.json‎

Lines changed: 46 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@
1212
"lint": "next lint",
1313
"test": "jest",
1414
"test:watch": "jest --watchAll",
15-
"prepare": "husky install"
15+
"prepare": "husky install",
16+
"e2e": "npx playwright test",
17+
"e2e:ui": "npx playwright test --ui",
18+
"e2e:headed": "npx playwright test --headed"
1619
},
1720
"dependencies": {
1821
"@apollo/client": "^3.7.9",
@@ -40,6 +43,7 @@
4043
},
4144
"devDependencies": {
4245
"@babel/preset-typescript": "^7.23.3",
46+
"@playwright/test": "^1.42.1",
4347
"@testing-library/jest-dom": "^6.1.4",
4448
"@testing-library/react": "^14.1.0",
4549
"@testing-library/user-event": "^14.5.1",

‎playwright.config.ts‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import { defineConfig, devices } from "@playwright/test";
2+
3+
/**
4+
* Read environment variables from file.
5+
* https://github.com/motdotla/dotenv
6+
*/
7+
// require('dotenv').config();
8+
9+
/**
10+
* See https://playwright.dev/docs/test-configuration.
11+
*/
12+
export default defineConfig({
13+
testDir: "./playwright",
14+
fullyParallel: true,
15+
forbidOnly: !!process.env.CI,
16+
retries: process.env.CI ? 2 : 0,
17+
workers: process.env.CI ? 1 : undefined,
18+
reporter: "html",
19+
use: {
20+
baseURL: "http://localhost:3000",
21+
trace: "on-first-retry",
22+
},
23+
24+
projects: [
25+
{
26+
name: "chromium",
27+
use: { ...devices["Desktop Chrome"] },
28+
},
29+
30+
{
31+
name: "firefox",
32+
use: { ...devices["Desktop Firefox"] },
33+
},
34+
35+
{
36+
name: "webkit",
37+
use: { ...devices["Desktop Safari"] },
38+
},
39+
],
40+
41+
/* Run your local dev server before starting the tests */
42+
webServer: {
43+
command: "npm run start",
44+
url: "http://localhost:3000",
45+
reuseExistingServer: !process.env.CI,
46+
},
47+
});

‎playwright/practice.spec.ts‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import { test, expect } from "@playwright/test";
2+
3+
test("Application should have correct initial state", async ({ page }) => {
4+
await page.goto("");
5+
expect(await page.getByRole("main").getByRole("link").all()).toHaveLength(22);
6+
await expect(page.getByRole("main").getByRole("heading").first()).toHaveText(
7+
/Welcome/,
8+
);
9+
10+
await expect(page.locator(".text-lg").first()).toHaveText(
11+
"🧪 Practice Exams Platform",
12+
);
13+
await expect(page.locator(".text-lg").last()).toHaveText(
14+
"Select an exam from the list bellow.",
15+
);
16+
17+
const examHeaders = [
18+
"AWS Certified ANS-C01",
19+
"AWS Certified CLF-C02",
20+
"AWS Certified DAS-C01",
21+
"AWS Certified DBS-C01",
22+
"AWS Certified DVA-C02",
23+
"AWS Certified MLS-C01",
24+
"AWS Certified SAA-C03",
25+
"AWS Certified SCS-C02",
26+
"GCP ACE",
27+
"ITIL 4 Foundation",
28+
"Microsoft Azure AZ-104",
29+
"Microsoft Azure AZ-204",
30+
"Microsoft Azure AZ-305",
31+
"Microsoft Azure AZ-400",
32+
"Microsoft Azure AZ-500",
33+
"Microsoft Azure AZ-800",
34+
"Microsoft Azure AZ-900",
35+
"Microsoft Azure SC-900",
36+
"PSD I",
37+
"PSM I",
38+
"PSM II",
39+
"PSPO I",
40+
];
41+
42+
const examParagraphs = [
43+
"AWS Certified Advanced Networking Specialty",
44+
"AWS Certified Cloud Practitioner",
45+
"AWS Certified Data Analytics Specialty",
46+
"AWS Certified Database Specialty",
47+
"AWS Certified Developer Associate",
48+
"AWS Certified Machine Learning Specialty",
49+
"AWS Certified Solutions Architect Associate",
50+
"AWS Certified Security Specialty",
51+
"GCP Associate Cloud Engineer",
52+
"IT Service Management",
53+
"Microsoft Azure Administrator",
54+
"Developing Solutions for Azure",
55+
"Designing Microsoft Azure Infrastructure Solutions",
56+
"Designing and Implementing Microsoft DevOps Solutions",
57+
"Azure Security Engineer",
58+
"Windows Server Hybrid Administrator",
59+
"Microsoft Azure Fundamentals",
60+
"Microsoft Security, Compliance, and Identity Fundamentals",
61+
"Scrum Developer I for PSD I",
62+
"Scrum Master I for PSM I",
63+
"Scrum Master II for PSM II",
64+
"Scrum Product Owner I for PSPO I",
65+
];
66+
67+
let index = 0;
68+
for (const link of await page.getByRole("main").getByRole("link").all()) {
69+
await expect(link.locator("h2")).toHaveText(examHeaders[index]);
70+
await expect(link.locator("p")).toHaveText(examParagraphs[index++]);
71+
}
72+
});
73+
74+
test("Practice should work properly", async ({ page }) => {
75+
await page.goto("");
76+
await page.getByRole("link", { name: "AWS Certified ANS-C01 AWS" }).click();
77+
78+
await expect(
79+
page.getByRole("heading", { name: "AWS Certified ANS-C01" }),
80+
).toBeVisible();
81+
await expect(
82+
page.locator("main").getByRole("link").first().locator("h2"),
83+
).toHaveText("Practice mode");
84+
await expect(
85+
page.locator("main").getByRole("link").last().locator("h2"),
86+
).toHaveText("Exam mode");
87+
expect(await page.locator("main").getByRole("link").all()).toHaveLength(2);
88+
89+
await page.locator("main").getByRole("link").last().click();
90+
await expect(page.locator("main").locator("h1")).toContainText(
91+
"PRACTICE EXAM",
92+
);
93+
await expect(
94+
page.locator("main").locator("p", { hasText: "15:00" }),
95+
).toBeVisible();
96+
97+
const startButton = page.getByRole("button", { name: "Begin exam" });
98+
await expect(startButton).toBeEnabled();
99+
await startButton.click();
100+
101+
await expect(
102+
page.locator("button").filter({ hasText: "Next Question" }),
103+
).not.toBeEnabled();
104+
105+
const skipQuestion = page
106+
.locator("button")
107+
.filter({ hasText: "Skip Question" });
108+
await expect(skipQuestion).toBeEnabled();
109+
await skipQuestion.click();
110+
111+
await page.getByRole("button").first().click();
112+
113+
await page.getByRole("link", { name: "AWS Certified CLF-C02 AWS" }).click();
114+
await page.getByRole("link", { name: "Practice mode Learn and" }).click();
115+
116+
await expect(page.locator("input[type=number]")).toHaveValue("1");
117+
await expect(page.getByText("597")).toBeVisible();
118+
expect(await page.locator("label").all()).toHaveLength(4);
119+
await page.locator("label").first().click();
120+
await page.getByRole("button", { name: "Reveal Answer" }).click();
121+
await expect(page.locator("main ul")).toHaveScreenshot({ threshold: 0.02 });
122+
123+
await page.getByRole("button", { name: "Next Question" }).click();
124+
await expect(page.locator("input[type=number]")).toHaveValue("2");
125+
await page.locator("label").last().click();
126+
await page.getByRole("button", { name: "Reveal Answer" }).click();
127+
await expect(page.locator("main ul")).toHaveScreenshot({ threshold: 0.02 });
128+
});

‎playwright/practice.spec.ts-snapshots/Practice-should-work-properly-1-chromium-win32.png‎

12.5 KB
Loading

‎playwright/practice.spec.ts-snapshots/Practice-should-work-properly-2-chromium-win32.png‎

30.5 KB
Loading

0 commit comments

Comments
 (0)