Merge pull request #13 from jerseysu/test-page-object

feat(IndexPage.ts): intro the page object pattern for the e2e test

Author: jerseysu

src/pages/Login.tsx

@@ -40,7 +40,9 @@ const Login = () => {
               id="email"
               label="Email Address"
               name="email"
+              data-testid="email"
               autoFocus
+              type="textbox"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
             />
@@ -51,8 +53,9 @@ const Login = () => {
               fullWidth
               id="password"
               name="password"
+              data-testid="password"
               label="Password"
-              type="password"
+              type="textbox"
               value={password}
               onChange={(e) => {
                 setPassword(e.target.value);
@@ -61,6 +64,7 @@ const Login = () => {
 
             <Button
               component={Link}
+              data-testid="loginButton"
               fullWidth
               to="/home"
               variant="contained"
@@ -71,7 +75,7 @@ const Login = () => {
 
             <Grid container justifyContent={"flex-end"}>
               <Grid item>
-                <Link to="/register">Don't have an account? Register</Link>
+                <Link to="/register" data-testid="registerLink">Don't have an account? Register</Link>
               </Grid>
             </Grid>
           </Box>

src/pages/LoginSuccess.tsx

@@ -24,7 +24,7 @@ const LoginSuccess = () => {
           <Avatar sx={{ m: 1, bgcolor: "primary.light" }}>
             <CheckCircle />
           </Avatar>
-          <Typography variant="h5">LoginSuccess</Typography>
+          <Typography variant="h5" data-testid='loginMessage'>LoginSuccess</Typography>
           <Link to="/">
             <img src="https://scontent.ftpe7-4.fna.fbcdn.net/v/t1.18169-9/998025_10151520012340920_1273035109_n.jpg?_nc_cat=105&ccb=1-7&_nc_sid=f798df&_nc_ohc=_HN2ki-NJdwQ7kNvgFA9NKO&_nc_ht=scontent.ftpe7-4.fna&oh=00_AYATB7lOPZlc2v0mq6-2OMdFrSwCoL3zV_-IVmRF3kUUjg&oe=66B450BD" alt="Jersey" width="500" height="600"></img>
           </Link>

src/pages/Register.tsx

@@ -42,6 +42,7 @@ const Register = () => {
                   fullWidth
                   id="name"
                   label="Name"
+                  data-testid="name"
                   autoFocus
                   value={name}
                   onChange={(e) => setName(e.target.value)}
@@ -54,6 +55,7 @@ const Register = () => {
                   fullWidth
                   id="email"
                   label="Email Address"
+                  data-testid="email"
                   name="email"
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
@@ -65,7 +67,8 @@ const Register = () => {
                   fullWidth
                   name="password"
                   label="Password"
-                  type="password"
+                  type="textbox"
+                  data-testid="password"
                   id="password"
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
@@ -75,6 +78,7 @@ const Register = () => {
 
             <Button
               component={Link}
+              data-testid="registerButton"
               fullWidth
               to="/home"
               variant="contained"
@@ -85,7 +89,7 @@ const Register = () => {
 
             <Grid container justifyContent="flex-end">
               <Grid item>
-                <Link to="/login">Already have an account? Login</Link>
+                <Link to="/login" data-testid="loginLink">Already have an account? Login</Link>
               </Grid>
             </Grid>
           </Box>

tests/indexPage.spec.ts

@@ -1,8 +1,25 @@
 import { test, expect } from '@playwright/test';
+import { IndexPage } from './pages/indexPage';
+import { WelcomePage } from './pages/welcomePage';
 
-test('has title', async ({ page }) => {
-  await page.goto('/playwright-demo');
+test.describe('Login Page', () => {
+  test('has title', async ({ page }) => {
+    const indexPage = new IndexPage(page);
+    await indexPage.goto();
 
-  // Expect a title "to contain" a substring.
-  await expect(page).toHaveTitle(/Jersey's Login Page/);
+    // Expect a title "to contain" a substring.
+    await expect(page).toHaveTitle(/Jersey's Login Page/);
+  });
+
+  test('do login', async ({ page }) => {
+    const indexPage = new IndexPage(page);
+    await indexPage.goto();
+    await indexPage.loginAction();
+
+    const welcomePage = new WelcomePage(page);
+    const welcomeMsgText = await welcomePage.getWelcomeMsgText();
+
+    // Expect a welcome message LoginSuccess
+    await expect(welcomeMsgText).toContain('LoginSuccess');
+  });
 });

tests/pages/indexPage.ts

@@ -0,0 +1,38 @@
+import { expect, type Locator, type Page } from '@playwright/test';
+
+export class IndexPage {
+  readonly page: Page;
+  readonly email: Locator;
+  readonly password: Locator;
+  readonly loginButton: Locator;
+  readonly registerLink: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.email = page.locator('div[data-testid="email"] input');
+    this.password = page.locator('div[data-testid="password"] input');
+    this.loginButton = page.locator('a[data-testid="loginButton"]');
+    this.registerLink = page.locator('a[data-testid="registerLink"]');
+  }
+
+  async goto() {
+    await this.page.goto('/react-playwright-demo');
+  }
+
+  async fillEmail() {
+    await this.email.fill('[email protected]');
+    await expect(this.email).toBeVisible();
+  }
+
+  async fillPassword() {
+    // TODO: use the secret service.
+    await this.password.fill('');
+    await expect(this.password).toBeVisible();
+  }
+
+  async loginAction() {
+    await this.fillEmail();
+    await this.fillPassword();
+    await this.loginButton.click();
+  }
+}

tests/pages/registerPage.ts

@@ -0,0 +1,46 @@
+import { expect, type Locator, type Page } from '@playwright/test';
+
+export class RegisterPage {
+  readonly page: Page;
+  readonly name: Locator;
+  readonly email: Locator;
+  readonly password: Locator;
+  readonly registerButton: Locator;
+  readonly loginLink: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.name = page.locator('div[data-testid="name"] input');
+    this.email = page.locator('div[data-testid="email"] input');
+    this.password = page.locator('div[data-testid="password"] input');
+    this.registerButton = page.locator('a[data-testid="registerButton"]');
+    this.loginLink = page.locator('a[data-testid="loginLink"]');
+  }
+
+  async goto() {
+    await this.page.goto('/react-playwright-demo/register');
+  }
+
+  async fillName() {
+    await this.name.fill('JerseyAwesome');
+    await expect(this.name).toBeVisible();
+  }
+
+  async fillEmail() {
+    await this.email.fill('[email protected]');
+    await expect(this.email).toBeVisible();
+  }
+
+  async fillPassword() {
+    // TODO: use the secret service.
+    await this.password.fill('');
+    await expect(this.password).toBeVisible();
+  }
+
+  async registerAction() {
+    await this.fillName();
+    await this.fillEmail();
+    await this.fillPassword();
+    await this.registerButton.click();
+  }
+}

tests/pages/welcomePage.ts

@@ -0,0 +1,19 @@
+import { type Locator, type Page } from '@playwright/test';
+
+export class WelcomePage {
+  readonly page: Page;
+  readonly welcomeMsg: Locator;
+
+  constructor(page: Page) {
+    this.page = page;
+    this.welcomeMsg = page.locator('h5[data-testid="loginMessage"]');
+  }
+
+  async goto() {
+    await this.page.goto('/react-playwright-demo/home');
+  }
+
+  async getWelcomeMsgText() {
+    return await this.welcomeMsg.innerText();
+  }
+}

tests/registerPage.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test';
+import { RegisterPage } from './pages/registerPage';
+import { WelcomePage } from './pages/welcomePage';
+
+test.describe('Register Page', () => {
+  test('do register', async ({ page }) => {
+    const registerPage = new RegisterPage(page);
+    await registerPage.goto();
+    await registerPage.registerAction();
+
+    const welcomePage = new WelcomePage(page);
+    const welcomeMsgText = await welcomePage.getWelcomeMsgText();
+
+    // Expect a welcome message LoginSuccess
+    await expect(welcomeMsgText).toContain('LoginSuccess');
+  });
+});