tests: add e2e for wikipedia

examples/module2/lesson2/extended/mocks/handlers/watch.ts

@@ -1,4 +1,4 @@
-import { HttpResponse, StrictResponse, http } from 'msw';
+import { HttpResponse, type StrictResponse, http } from 'msw';
 
 export const watchHandlers = [
   http.post('/w/api.php', async ({ request }) => {

examples/module2/lesson2/extended/pages/community-portal.page.ts

@@ -0,0 +1,33 @@
+import { type Locator, type Page } from '@playwright/test';
+import { URLs } from '../utils/constants';
+
+export class CommunityPortalPage {
+  private readonly page: Page;
+  private readonly url = URLs.COMMUNITY_PORTAL_PAGE;
+  private readonly linkToHelpDesk: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+
+    this.linkToHelpDesk = page
+      .locator('div')
+      .filter({ hasText: /^Help desk$/ })
+      .getByRole('link');
+  }
+
+  navigate() {
+    return this.page.goto(this.url);
+  }
+
+  getTitle() {
+    return this.page.getByRole('main').getByRole('heading').first();
+  }
+
+  async goToHelpCenter() {
+    const helpDeskHref = (await this.linkToHelpDesk.getAttribute('href'))!;
+
+    await this.linkToHelpDesk.click();
+
+    return this.page.waitForURL(`**${helpDeskHref}`);
+  }
+}

examples/module2/lesson2/extended/pages/help-center.page.ts

@@ -0,0 +1,41 @@
+import { type Locator, type Page } from '@playwright/test';
+import { URLs } from '../utils/constants';
+
+export class HelpCenterPage {
+  private readonly page: Page;
+  private readonly url = URLs.HELP_DESK_PAGE;
+  private readonly faqInputSearch: Locator;
+  private readonly faqSubmitButton: Locator;
+  private readonly searchResults: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+
+    this.faqInputSearch = page.locator(
+      '.wikitable tr:first-of-type input.mw-searchInput'
+    );
+    this.faqSubmitButton = page.getByRole('button', {
+      name: 'Search the frequently asked',
+    });
+    this.searchResults = page.locator('.mw-search-result-heading');
+  }
+
+  navigate() {
+    return this.page.goto(this.url);
+  }
+
+  getTitle() {
+    return this.page.getByRole('main').getByRole('heading').first();
+  }
+
+  checkSearchResult() {
+    return this.searchResults;
+  }
+
+  async searchFor(term: string) {
+    await this.faqInputSearch.waitFor({ state: 'visible', timeout: 10000 });
+    await this.faqInputSearch.fill(term);
+    await this.faqSubmitButton.click();
+    await this.page.waitForURL(`${URLs.SEARCH_RESULTS_PAGE}**search=${term}**`);
+  }
+}

examples/module2/lesson2/extended/pages/main.page.ts

@@ -18,7 +18,7 @@ export class MainPage {
 
     this.searchInput = page
       .getByRole('search')
-      .getByRole('searchbox', { name: /Search Wikipedia/i });
+      .getByRole('combobox', { name: /Search Wikipedia/i });
   }
 
   navigate() {
@@ -42,10 +42,26 @@ export class MainPage {
     return this.page.waitForURL(`**${articleHref}`);
   }
 
+  async goToCommunityPortalPage() {
+    const linkToCommunityPortal = this.page.getByTitle('The hub for editors');
+
+    const communityPortalHref = (await linkToCommunityPortal.getAttribute(
+      'href'
+    ))!;
+
+    await linkToCommunityPortal.click();
+
+    return this.page.waitForURL(`**${communityPortalHref}`);
+  }
+
   async searchFor(term: string) {
     return this.searchInput.fill(term);
   }
 
+  async activateSearch() {
+    await this.searchInput.focus();
+  }
+
   getSearchResults() {
     return this.page.getByRole('listbox', { name: /Search results/i });
   }

examples/module2/lesson2/extended/tests/e2e/logged-in/find-term-in-main-search.spec.ts

@@ -0,0 +1,17 @@
+import { expect, test } from '../../../fixtures';
+import { MainPage } from '../../../pages/main.page';
+
+test.beforeEach(async ({ page }) => {
+  const mainPage = new MainPage(page);
+  await mainPage.navigate();
+});
+
+test('find the term in the main search', async ({ page }) => {
+  const SEARCH_TERM = 'Playwright';
+
+  const mainPage = new MainPage(page);
+  await mainPage.activateSearch();
+  await mainPage.searchFor(SEARCH_TERM);
+
+  await expect(mainPage.getFirstSearchResult()).toHaveText(SEARCH_TERM);
+});

examples/module2/lesson2/extended/tests/e2e/logged-in/search-help-center-for-watchlist.spec.ts

@@ -0,0 +1,30 @@
+import { expect, test } from '../../../fixtures';
+import { MainPage } from '../../../pages/main.page';
+import { CommunityPortalPage } from '../../../pages/community-portal.page';
+import { HelpCenterPage } from '../../../pages/help-center.page';
+
+test.beforeEach(async ({ page }) => {
+  const mainPage = new MainPage(page);
+  await mainPage.navigate();
+});
+
+test('search help center for information about watchlist', async ({ page }) => {
+  const SEARCH_TERM = 'watchlist';
+
+  const mainPage = new MainPage(page);
+  const communityPortal = new CommunityPortalPage(page);
+  const helpCenter = new HelpCenterPage(page);
+
+  await mainPage.goToCommunityPortalPage();
+  await expect(communityPortal.getTitle()).toHaveText(
+    'Wikipedia:Community portal'
+  );
+
+  await communityPortal.goToHelpCenter();
+  await expect(helpCenter.getTitle()).toHaveText('Wikipedia:Help desk');
+
+  await helpCenter.searchFor(SEARCH_TERM);
+
+  await expect(helpCenter.getTitle()).toHaveText('Search results');
+  await expect(page.getByText(SEARCH_TERM).first()).toBeVisible();
+});

examples/module2/lesson2/extended/utils/constants.ts

@@ -2,4 +2,8 @@ export const URLs = {
   MAIN_PAGE: 'https://en.wikipedia.org/wiki/Main_Page',
   LOGIN_PAGE:
     'https://en.wikipedia.org/w/index.php?title=Special:UserLogin&returnto=Main+Page',
+  COMMUNITY_PORTAL_PAGE:
+    'https://en.wikipedia.org/wiki/Wikipedia:Community_portal',
+  HELP_DESK_PAGE: 'https://en.wikipedia.org/wiki/Wikipedia:Help_desk',
+  SEARCH_RESULTS_PAGE: 'https://en.wikipedia.org/wiki/Special:Search',
 };

examples/playwright.config.ts

@@ -4,7 +4,7 @@ import path from 'path';
 dotenv.config();
 
 const BASE_URL = 'https://en.wikipedia.org';
-const PROJECT_DIR = './module2/lesson2/base';
+const PROJECT_DIR = './module2/lesson2/extended';
 const SETUP_PATH_REGEX = '**/*.setup.ts';
 const LOGGED_IN_PATH_REGEX = '**/logged-in/*.spec.ts';