feat(registerPage.ts): intro the registerpage page object pattern

Author: jerseysu

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

@@ -4,8 +4,8 @@ import { WelcomePage } from './pages/welcomePage';
 
 test.describe('Login Page', () => {
   test('has title', async ({ page }) => {
-    const playwrightDev = new IndexPage(page);
-    await playwrightDev.goto();
+    const indexPage = new IndexPage(page);
+    await indexPage.goto();
 
     // Expect a title "to contain" a substring.
     await expect(page).toHaveTitle(/Jersey's Login Page/);

tests/pages/indexPage.ts

@@ -25,11 +25,11 @@ export class IndexPage {
   }
 
   async fillPassword() {
+    // TODO: use the secret service.
     await this.password.fill('Dev0psd@y2024');
     await expect(this.password).toBeVisible();
   }
 
-
   async loginAction() {
     await this.fillEmail();
     await this.fillPassword();

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('Dev0psd@y2024');
+    await expect(this.password).toBeVisible();
+  }
+
+  async registerAction() {
+    await this.fillName();
+    await this.fillEmail();
+    await this.fillPassword();
+    await this.registerButton.click();
+  }
+}

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');
+  });
+});