diff --git a/e2e/articles.spec.ts b/e2e/articles.spec.ts
index 4b1a9929..48361487 100644
--- a/e2e/articles.spec.ts
+++ b/e2e/articles.spec.ts
@@ -102,27 +102,36 @@ test.describe("Authenticated Articles Page", () => {
// Waits for articles to be loaded
await page.waitForSelector("article");
- const initialArticleCount = await page.$$eval(
- "article",
- (articles) => articles.length,
- );
+ // This delays the requests by 100ms.
+ // This is needed as the load more article request was resolving too fast
+ await page.route("**/*", async (route) => {
+ await new Promise((f) => setTimeout(f, 100));
+ await route.continue();
+ });
if (!isMobile) {
- await page.getByText("Code Of Conduct").scrollIntoViewIfNeeded();
- await page.waitForTimeout(5000);
- const finalArticleCount = await page.$$eval(
- "article",
- (articles) => articles.length,
- );
- expect(finalArticleCount).toBeGreaterThan(initialArticleCount);
+ const articleLocator = page.locator("article");
+ const initialArticleCount = await articleLocator.count();
+
+ await page
+ .getByRole("link", { name: "Code Of Conduct" })
+ .scrollIntoViewIfNeeded();
+
+ // We expect to see the loading indicator become visible why loading and then hidden when more articles are loaded
+ await expect(page.getByTestId("article-loading-indicator")).toBeVisible();
+ await expect(page.getByTestId("article-loading-indicator")).toBeHidden();
+
+ expect(await articleLocator.count()).toBeGreaterThan(initialArticleCount);
}
- await expect(page.getByText("Home")).toBeVisible();
+ await expect(page.getByRole("link", { name: "Home" })).toBeVisible();
await expect(
page.getByLabel("Footer").getByRole("link", { name: "Events" }),
).toBeVisible();
- await expect(page.getByText("Sponsorship")).toBeVisible();
- await expect(page.getByText("Code Of Conduct")).toBeVisible();
+ await expect(page.getByRole("link", { name: "Sponsorship" })).toBeVisible();
+ await expect(
+ page.getByRole("link", { name: "Code Of Conduct" }),
+ ).toBeVisible();
});
test("Should write and publish an article", async ({ page, isMobile }) => {
diff --git a/playwright.config.ts b/playwright.config.ts
index ef8e0e87..6cbc7811 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -29,6 +29,9 @@ export default defineConfig({
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: "on-first-retry",
},
+ expect: {
+ timeout: 10000,
+ },
/* Configure projects for major browsers */
projects: [