Skip to content

Commit b1c6e17

Browse files
NiallJoeMaherNiallJoeMaher
authored
Add e2e tests for articles and fix homepage test (#690)
* Add e2e tests for articles and fix homepage test
1 parent b0d9c18 commit b1c6e17

5 files changed

Lines changed: 103 additions & 65 deletions

File tree

‎.github/workflows/playwright.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ jobs:
2424
if: ${{ env.DATABASE_URL == '' }}
2525
run: echo "The secret \"DATABASE_URL\" has not been made; echo please go to \"settings \> secrets \> actions\" to create it
2626
- name: Run Playwright tests
27+
env:
28+
DATABASE_URL: ${{ secrets.DATABASE_URL }}
2729
run: npx playwright test
2830
- uses: actions/upload-artifact@v3
2931
if: always()

‎.gitignore‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,4 +60,12 @@ ssmSetup.zsh
6060
.sentryclirc
6161

6262
# Generated files
63-
.swc
63+
.swc
64+
/test-results/
65+
/playwright-report/
66+
/blob-report/
67+
/playwright/.cache/
68+
/test-results/
69+
/playwright-report/
70+
/blob-report/
71+
/playwright/.cache/

‎e2e/articles.spec.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { test, expect } from "playwright/test";
2+
3+
test.describe("Articles", () => {
4+
test("Should load more articles when scrolling to the end of the page", async ({
5+
page,
6+
}) => {
7+
await page.goto("http://localhost:3000/articles");
8+
// Waits for articles to be loaded
9+
await page.waitForSelector("article");
10+
11+
const initialArticleCount = await page.$$eval(
12+
"article",
13+
(articles) => articles.length,
14+
);
15+
16+
await page.evaluate(() => {
17+
window.scrollTo(0, document.body.scrollHeight);
18+
});
19+
20+
await expect(page.locator(".animate-pulse")).toBeVisible();
21+
await expect(page.locator(".animate-pulse")).not.toBeVisible();
22+
23+
const finalArticleCount = await page.$$eval(
24+
"article",
25+
(articles) => articles.length,
26+
);
27+
28+
expect(finalArticleCount).toBeGreaterThan(initialArticleCount);
29+
});
30+
});

‎e2e/home.spec.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { test, expect } from "@playwright/test";
22

33
test.describe("Confirm homepage content", () => {
44
test("Shared content", async ({ page }) => {
5-
await page.goto("/");
5+
await page.goto("http://localhost:3000/");
66
// Check headers
77

88
await expect(page.locator("h1")).toContainText("A space for coders");
@@ -18,7 +18,7 @@ test.describe("Confirm homepage content", () => {
1818
});
1919

2020
test("Different devices", async ({ page, isMobile }) => {
21-
await page.goto("/");
21+
await page.goto("http://localhost:3000/");
2222

2323
const elementVisible = await page
2424
.locator('text="Recommended topics"')

‎playwright.config.ts‎

Lines changed: 60 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,77 @@
1-
import { type PlaywrightTestConfig, devices } from "@playwright/test";
2-
import path from "path";
1+
import { defineConfig, devices } from "@playwright/test";
32

4-
// Set webServer.url and use.baseURL with the location of the WebServer respecting the correct set port
5-
const baseURL =
6-
process.env.BASE_URL || `http://localhost:${process.env.PORT || 3000}`;
7-
8-
// Reference: https://playwright.dev/docs/test-configuration
9-
const config: PlaywrightTestConfig = {
10-
// Timeout per test
11-
timeout: 30 * 1000,
12-
// Test directory
13-
testDir: path.join(__dirname, "e2e"),
14-
// If a test fails, retry it additional 2 times
15-
retries: 2,
16-
// Artifacts folder where screenshots, videos, and traces are stored.
17-
outputDir: "e2e-results/",
18-
19-
// Run your local dev server before starting the tests:
20-
// https://playwright.dev/docs/test-advanced#launching-a-development-web-server-during-the-tests
21-
webServer: {
22-
command: "npm run dev",
23-
url: baseURL,
24-
timeout: 120 * 1000,
25-
reuseExistingServer: !!process.env.CI,
26-
},
3+
/**
4+
* Read environment variables from file.
5+
* https://github.com/motdotla/dotenv
6+
*/
7+
// require('dotenv').config();
278

9+
/**
10+
* See https://playwright.dev/docs/test-configuration.
11+
*/
12+
export default defineConfig({
13+
testDir: "./e2e",
14+
/* Run tests in files in parallel */
15+
fullyParallel: true,
16+
/* Fail the build on CI if you accidentally left test.only in the source code. */
17+
forbidOnly: !!process.env.CI,
18+
/* Retry on CI only */
19+
retries: process.env.CI ? 2 : 0,
20+
/* Opt out of parallel tests on CI. */
21+
workers: process.env.CI ? 1 : undefined,
22+
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
23+
reporter: "html",
24+
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
2825
use: {
29-
// Use baseURL so to make navigations relative.
30-
// More information: https://playwright.dev/docs/api/class-testoptions#test-options-base-url
31-
baseURL,
32-
33-
headless: true,
34-
35-
// Retry a test if its failing with enabled tracing. This allows you to analyse the DOM, console logs, network traffic etc.
36-
// More information: https://playwright.dev/docs/trace-viewer
37-
trace: "retry-with-trace",
26+
/* Base URL to use in actions like `await page.goto('/')`. */
27+
// baseURL: 'http://127.0.0.1:3000',
3828

39-
// All available context options: https://playwright.dev/docs/api/class-browser#browser-new-context
40-
// contextOptions: {
41-
// ignoreHTTPSErrors: true,
42-
// },
29+
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
30+
trace: "on-first-retry",
4331
},
4432

33+
/* Configure projects for major browsers */
4534
projects: [
4635
{
47-
name: "Desktop Chrome",
48-
use: {
49-
...devices["Desktop Chrome"],
50-
},
36+
name: "chromium",
37+
use: { ...devices["Desktop Chrome"] },
38+
},
39+
40+
{
41+
name: "firefox",
42+
use: { ...devices["Desktop Firefox"] },
5143
},
44+
45+
{
46+
name: "webkit",
47+
use: { ...devices["Desktop Safari"] },
48+
},
49+
50+
/* Test against mobile viewports. */
5251
// {
53-
// name: 'Desktop Firefox',
54-
// use: {
55-
// ...devices['Desktop Firefox'],
56-
// },
52+
// name: 'Mobile Chrome',
53+
// use: { ...devices['Pixel 5'] },
5754
// },
5855
// {
59-
// name: 'Desktop Safari',
60-
// use: {
61-
// ...devices['Desktop Safari'],
62-
// },
56+
// name: 'Mobile Safari',
57+
// use: { ...devices['iPhone 12'] },
6358
// },
64-
// Test against mobile viewports.
65-
{
66-
name: "Mobile Chrome",
67-
use: {
68-
...devices["Pixel 5"],
69-
},
70-
},
59+
60+
/* Test against branded browsers. */
7161
// {
72-
// name: 'Mobile Safari',
73-
// use: devices['iPhone 12'],
62+
// name: 'Microsoft Edge',
63+
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
64+
// },
65+
// {
66+
// name: 'Google Chrome',
67+
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
7468
// },
7569
],
7670

77-
reporter: [["html", { outputFolder: "e2e-report" }]],
78-
};
79-
export default config;
71+
/* Run your local dev server before starting the tests */
72+
webServer: {
73+
command: "npm run dev",
74+
url: "http://127.0.0.1:3000",
75+
reuseExistingServer: !process.env.CI,
76+
},
77+
});

0 commit comments

Comments
 (0)