test(e2e): add E2E tests for update-email page (#51740)

client/src/pages/update-email.tsx

@@ -72,11 +72,19 @@ function UpdateEmail({ isNewEmail, t, updateMyEmail }: UpdateEmailProps) {
       </Helmet>
       <Container>
         <Spacer size='medium' />
-        <h2 className='text-center'>{t('misc.update-email-2')}</h2>
+        <h2
+          className='text-center'
+          data-playwright-test-label='update-email-heading'
+        >
+          {t('misc.update-email-2')}
+        </h2>
         <Row>
           <Col sm={6} smOffset={3}>
             <Row>
-              <form onSubmit={handleSubmit}>
+              <form
+                onSubmit={handleSubmit}
+                data-playwright-test-label='update-email-form'
+              >
                 <FormGroup
                   className='update-email-field'
                   controlId='emailInput'
@@ -88,6 +96,7 @@ function UpdateEmail({ isNewEmail, t, updateMyEmail }: UpdateEmailProps) {
                     placeholder='camperbot@example.com'
                     required={true}
                     type='email'
+                    data-playwright-test-label='update-email-input'
                   />
                 </FormGroup>
                 <Button
@@ -96,6 +105,7 @@ function UpdateEmail({ isNewEmail, t, updateMyEmail }: UpdateEmailProps) {
                   bsStyle='primary'
                   disabled={getEmailValidationState() !== 'success'}
                   type='submit'
+                  data-playwright-test-label='update-email-submit-button'
                 >
                   {isNewEmail
                     ? t('buttons.update-email')
@@ -103,7 +113,12 @@ function UpdateEmail({ isNewEmail, t, updateMyEmail }: UpdateEmailProps) {
                 </Button>
               </form>
               <p className='text-center'>
-                <Link to='/signout'>{t('buttons.sign-out')}</Link>
+                <Link
+                  to='/signout'
+                  data-playwright-test-label='update-email-sign-out-button'
+                >
+                  {t('buttons.sign-out')}
+                </Link>
               </p>
             </Row>
           </Col>

e2e/update-email.spec.ts

@@ -0,0 +1,53 @@
+import { test, expect, type Page } from '@playwright/test';
+import translations from '../client/i18n/locales/english/translations.json';
+
+let page: Page;
+
+test.beforeAll(async ({ browser }) => {
+  page = await browser.newPage();
+  await page.goto('/update-email');
+});
+
+test.afterAll(async () => {
+  await page.close();
+});
+
+test.describe('The update-email page', () => {
+  test('The page renders with correct title', async () => {
+    await expect(page).toHaveTitle(
+      'Update your email address | freeCodeCamp.org'
+    );
+  });
+
+  test('The page has correct header', async () => {
+    const header = page.getByTestId('update-email-heading');
+
+    await expect(header).toBeVisible();
+    await expect(header).toContainText(translations.misc['update-email-2']);
+  });
+
+  test('The page has update email form', async () => {
+    const form = page.getByTestId('update-email-form');
+    const emailInput = page.getByTestId('update-email-input');
+    const submitButton = page.getByTestId('update-email-submit-button');
+
+    await expect(form).toBeVisible();
+    await expect(emailInput).toHaveAttribute('type', 'email');
+    await expect(emailInput).toHaveAttribute(
+      'placeholder',
+      'camperbot@example.com'
+    );
+    await expect(submitButton).toHaveAttribute('type', 'submit');
+    await expect(submitButton).toContainText(
+      translations.buttons['update-email']
+    );
+  });
+
+  test('The page has sign out button', async () => {
+    const signOutButton = page.getByTestId('update-email-sign-out-button');
+
+    await expect(signOutButton).toBeVisible();
+    await expect(signOutButton).toContainText(translations.buttons['sign-out']);
+    await expect(signOutButton).toHaveAttribute('href', '/signout');
+  });
+});