Add Axe accessibility E2E tests (#2)

Reviewed-on: #2

e2e/models/Base.ts

@@ -0,0 +1,49 @@
+import { expect, type Locator, type Page } from '@playwright/test'
+
+export class Base {
+  readonly ambientLinksLocator: Locator
+  readonly articlesLocator: Locator
+  readonly continuationErrorLocator: Locator
+  readonly endOfFeedLocator: Locator
+  readonly loadingRailLocator: Locator
+  readonly mutationButtonsLocator: Locator
+  readonly mutationLinksLocator: Locator
+
+  constructor(readonly page: Page) {
+    const ambientLinkNames = /ホーム|おすすめ|トレンド|通知|履歴/
+    const mutationControlNames =
+      /投稿する|返信|いいね|再投稿|フォロー|ブックマーク/
+
+    this.ambientLinksLocator = page.getByRole('link', {
+      name: ambientLinkNames,
+    })
+    this.articlesLocator = page.locator('article')
+    this.continuationErrorLocator = page
+      .getByRole('alert')
+      .filter({ hasText: '続きの投稿を取得できませんでした。' })
+    this.endOfFeedLocator = page.getByText('これ以上の投稿はありません。')
+    this.loadingRailLocator = page.locator('.loading-rail')
+    this.mutationButtonsLocator = page.getByRole('button', {
+      name: mutationControlNames,
+    })
+    this.mutationLinksLocator = page.getByRole('link', {
+      name: mutationControlNames,
+    })
+  }
+
+  protected async navigateTo(path: string) {
+    await this.page.goto(path)
+    await this.page.waitForLoadState('networkidle')
+  }
+
+  async tabTo(target: Locator) {
+    await this.page.keyboard.press('Tab')
+    await expect(target).toBeFocused()
+  }
+
+  async retryContinuation() {
+    await this.continuationErrorLocator
+      .getByRole('button', { name: '再試行' })
+      .click()
+  }
+}

e2e/models/HomePage.ts

@@ -0,0 +1,22 @@
+import type { Locator, Page } from '@playwright/test'
+import { Base } from './Base'
+
+export class HomePage extends Base {
+  readonly handleInputLocator: Locator
+  readonly submitButtonLocator: Locator
+
+  constructor(page: Page) {
+    super(page)
+    this.handleInputLocator = page.getByLabel('ハンドルまたはプロフィール URL')
+    this.submitButtonLocator = page.getByRole('button', { name: '表示' })
+  }
+
+  async goTo() {
+    await this.navigateTo('/')
+  }
+
+  async displayUser(handle: string) {
+    await this.handleInputLocator.fill(handle)
+    await this.submitButtonLocator.click()
+  }
+}

e2e/models/ListsPage.ts

@@ -0,0 +1,11 @@
+import { Base } from './Base'
+
+export class ListsPage extends Base {
+  async goTo() {
+    await this.navigateTo('/i/lists')
+  }
+
+  async openList(name: RegExp | string) {
+    await this.page.getByRole('link', { name }).click()
+  }
+}

e2e/models/SearchPage.ts

@@ -0,0 +1,35 @@
+import type { Locator, Page } from '@playwright/test'
+import { Base } from './Base'
+
+export class SearchPage extends Base {
+  readonly followingOnlyLocator: Locator
+  readonly latestRankingLocator: Locator
+  readonly queryInputLocator: Locator
+  readonly searchButtonLocator: Locator
+  readonly topRankingLocator: Locator
+
+  constructor(page: Page) {
+    super(page)
+    this.followingOnlyLocator = page.getByLabel('フォロー中のみ')
+    this.latestRankingLocator = page.getByLabel('最新順')
+    this.queryInputLocator = page.getByLabel('検索語')
+    this.searchButtonLocator = page.getByRole('button', { name: '検索' })
+    this.topRankingLocator = page.getByLabel('人気順')
+  }
+
+  async goTo() {
+    await this.navigateTo('/search?q=&product=Latest&following=false')
+  }
+
+  async search(query: string) {
+    await this.queryInputLocator.fill(query)
+    await this.searchButtonLocator.click()
+  }
+
+  async searchTopFromFollowing(query: string) {
+    await this.queryInputLocator.fill(query)
+    await this.topRankingLocator.check()
+    await this.followingOnlyLocator.check()
+    await this.searchButtonLocator.click()
+  }
+}

e2e/models/ThreadPage.ts

@@ -0,0 +1,17 @@
+import type { Locator, Page } from '@playwright/test'
+import { Base } from './Base'
+
+export class ThreadPage extends Base {
+  readonly headingLocator: Locator
+  readonly selectedPostLabelLocator: Locator
+
+  constructor(page: Page) {
+    super(page)
+    this.headingLocator = page.getByRole('heading', { name: '会話' })
+    this.selectedPostLabelLocator = page.getByText('表示中の投稿')
+  }
+
+  async goTo(handle: string, tweetId: string) {
+    await this.navigateTo(`/${handle}/status/${tweetId}`)
+  }
+}

e2e/models/UserPage.ts

@@ -0,0 +1,15 @@
+import { Base } from './Base'
+
+export class UserPage extends Base {
+  async goTo(handle: string) {
+    await this.navigateTo(`/${handle}`)
+  }
+
+  async openPostDetails(postText: string) {
+    await this.page
+      .getByRole('article')
+      .filter({ hasText: postText })
+      .getByRole('link', { name: '詳細・スレッド' })
+      .click()
+  }
+}