feat(fe): initialize e2e test

playwright-frontend/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "playwright-project",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "@playwright/test": "^1.45.3"
+  }
+}

playwright-frontend/pages/auth.page.ts

@@ -0,0 +1,131 @@
+import type { Page } from '@playwright/test'
+
+export class Auth {
+  public readonly page: Page
+  public readonly loginButton = 'button#login'
+  public readonly loginModal = '#login-modal'
+  public readonly loginModalCloseButton = '#login-modal-close'
+  public readonly loginButtonInSignupModal = 'button#login in signup'
+  public readonly loginSubmitButton = 'button#loginSubmit'
+
+  public readonly forgotIDPasswordButton = 'button#forgotIDPassword'
+  public readonly forgotIDPasswordModal = '#forgotIDPassword-modal'
+  public readonly forgotIDPasswordModalCloseButton =
+    '#forgotIDPassword-modal-close'
+  public readonly forgotEmailAddressSelector = 'input[name="Email Address"]'
+  public readonly forgotFindUserIDButton = 'button#forgotFindUserID'
+  public readonly forgotResetPasswordButton = 'button#forgotResetPassword'
+  public readonly forgotRegisterNowButton = 'button#forgotRegisterNow'
+
+  public readonly signupButton = 'button#signup'
+  public readonly signupModal = '#signup-modal'
+  public readonly signupModalCloseButton = '#signup-modal-close'
+  public readonly signupButtonInLoginModal = 'button#signup in login'
+  public readonly sendEmailButton = 'button#signup-with-email'
+  public readonly signupEmailAdressSelector = 'input[name="Email Address"]'
+  public readonly signupVerificationCode = 'input[name="Verification Code"]'
+  public readonly signupVerificationCodeNextButton = 'button#next'
+  public readonly signupYourName = 'input[name="Your name"]'
+  public readonly signupUserID = 'input[name="User ID"]'
+  public readonly signupPassword = 'input[name="Password"]'
+  public readonly signupReenterPassword = 'input[name="Re-enter password"]'
+  public readonly signupRegisterButton = 'button#signupRegister'
+
+  public readonly usernameSelector = 'input[name="username"]'
+  public readonly passwordSelector = 'input[name="password]'
+
+  public readonly userProfile = 'user-profile'
+  public readonly logoutButton = 'button#logout'
+  public readonly managementButton = 'button#management'
+
+  constructor(page: Page) {
+    this.page = page
+  }
+
+  async clickLoginButton() {
+    await this.page.click(this.loginButton)
+  }
+
+  async loginModalVisible() {
+    return await this.page.isVisible(this.loginModal)
+  }
+
+  async login(username: string, password: string) {
+    await this.page.fill(this.usernameSelector, username)
+    await this.page.fill(this.passwordSelector, password)
+    await this.page.click(this.loginSubmitButton)
+  }
+
+  async submitLoginButton() {
+    await this.page.click(this.loginSubmitButton)
+  }
+
+  async clickSignupButtonInLoginModal() {
+    await this.page.click(this.signupButtonInLoginModal)
+  }
+
+  async clickForgotIDPasswordButton() {
+    await this.page.click(this.forgotIDPasswordButton)
+  }
+
+  async forgotIDPasswordModalVisible() {
+    return await this.page.isVisible(this.forgotIDPasswordModal)
+  }
+
+  async closeForgotIDPsswordModal() {
+    if (await this.forgotIDPasswordModalVisible()) {
+      await this.page.click(this.forgotIDPasswordModalCloseButton)
+    }
+  }
+
+  async findUserID(emailAddress: string) {
+    await this.page.fill(this.forgotEmailAddressSelector, emailAddress)
+    await this.page.click(this.forgotFindUserIDButton)
+    await this.page.click(this.forgotResetPasswordButton)
+  }
+
+  async registerNow() {
+    await this.page.click(this.forgotRegisterNowButton)
+  }
+
+  async closeLoginModal() {
+    if (await this.loginModalVisible()) {
+      await this.page.click(this.loginModalCloseButton)
+    }
+  }
+
+  async isLoggedIn(): Promise<boolean> {
+    return this.page.isVisible(this.userProfile)
+  }
+
+  async logout() {
+    await this.page.click(this.logoutButton)
+  }
+
+  async isLoggedOut(): Promise<boolean> {
+    return this.page.isVisible(this.loginModal)
+  }
+
+  async clickSignupButton() {
+    await this.page.click(this.signupButton)
+  }
+
+  async signupModalVisible() {
+    return await this.page.isVisible(this.signupModal)
+  }
+
+  async signUp(emailAddress: string) {
+    await this.page.fill(this.signupEmailAdressSelector, emailAddress)
+    await this.page.click(this.sendEmailButton)
+  }
+
+  async clickLoginButtonInSignupModal() {
+    await this.page.click(this.loginButtonInSignupModal)
+  }
+
+  async closeSignupModal() {
+    if (await this.signupModalVisible) {
+      await this.page.click(this.signupModalCloseButton)
+    }
+  }
+}

playwright-frontend/pages/home.page.ts

@@ -0,0 +1,65 @@
+import type { Page } from '@playwright/test'
+
+export class HomePage {
+  //homepage URLs
+  public readonly homePageUrl = 'https://stage.codedang.com/'
+  public readonly noticePageUrl = 'https://stage.codedang.com/notice'
+  public readonly contestPageUrl = 'https://stage.codedang.com/contest'
+  public readonly problemPageUrl = 'https://stage.codedang.com/problem'
+  public readonly seeMorePageUrl = 'https://stage.codedang.com/problem'
+
+  //buttons
+  public readonly mainLogo = '#main-logo'
+  public readonly noticeButton = 'button#notice'
+  public readonly contestButton = 'button#contest'
+  public readonly problemButton = 'button#problem'
+  public readonly seemoreButton = 'button#seemore'
+
+  //3 banners and footer not included yet
+
+  constructor(public page: Page) {}
+
+  async goTo() {
+    await this.page.goto(this.homePageUrl)
+  }
+  //click button
+  async clickMainLogo() {
+    await this.page.click(this.mainLogo)
+  }
+
+  async clickNoticeButton() {
+    await this.page.click(this.noticeButton)
+  }
+
+  async clickContestButton() {
+    await this.page.click(this.contestButton)
+  }
+
+  async clickProblemButton() {
+    await this.page.click(this.problemButton)
+  }
+
+  async clickSeemoreButton() {
+    await this.page.click(this.seemoreButton)
+  }
+
+  async getCurrentUrl() {
+    return await this.page.url()
+  }
+
+  async goToNoticePage() {
+    await this.page.goto(this.noticePageUrl)
+  }
+
+  async goToContestPage() {
+    await this.page.goto(this.contestPageUrl)
+  }
+
+  async goToProblemPage() {
+    await this.page.goto(this.problemPageUrl)
+  }
+
+  async goToSeeMorePage() {
+    await this.page.goto(this.seeMorePageUrl)
+  }
+}

playwright-frontend/playwright.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig, devices } from '@playwright/test'
+
+export default defineConfig({
+  timeout: 30000,
+  retries: 2,
+  reporter: [['list'], ['json', { outputFile: 'test-results.json' }]],
+  testDir: '/tests',
+  testMatch: '**/*.{spec,test}.{ts.js}',
+  projects: [
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] }
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] }
+    },
+    {
+      name: 'Google Chrome',
+      use: { ...devices['Desktop Chrome'] }
+    }
+  ]
+})

playwright-frontend/test-results/.last-run.json

@@ -0,0 +1,4 @@
+{
+  "status": "failed",
+  "failedTests": []
+}

playwright-frontend/tests/auth/login.test.ts

@@ -0,0 +1,37 @@
+import { test, expect } from '@playwright/test'
+import { Auth } from '../../pages/auth.page'
+import { HomePage } from '../../pages/home.page'
+
+test.describe('Login Tests', () => {
+  let auth: Auth
+  let homePage: HomePage
+
+  test.beforeEach(async ({ page }) => {
+    auth = new Auth(page)
+    homePage = new HomePage(page)
+    await homePage.goTo()
+  })
+
+  test('Log in via homepage', async () => {
+    await auth.clickLoginButton()
+    expect(await auth.loginModalVisible()).toBe(true)
+
+    await auth.login('admin', 'Adminadmin')
+    expect(await homePage.page.isVisible(auth.userProfile)).toBe(true)
+    expect(await homePage.page.isVisible(auth.loginButton)).toBe(false)
+  })
+
+  test('Log in via sign up modal', async () => {
+    await auth.clickSignupButton()
+    expect(await auth.signupModalVisible()).toBe(true)
+
+    await auth.clickLoginButtonInSignupModal()
+    expect(await auth.loginModalVisible()).toBe(true)
+
+    await auth.login('admin', 'Adminadmin')
+
+    //change into next-auth session test or just add
+    expect(await homePage.page.isVisible(auth.userProfile)).toBe(true)
+    expect(await homePage.page.isVisible(auth.loginButton)).toBe(false)
+  })
+})