refactor(e2e): added playwright test labels to elements and improved the existing tests for coding-interview superblock

client/src/assets/icons/algorithm.tsx

@@ -6,6 +6,7 @@ function Algorithm(
   return (
     <>
       <svg
+        data-playwright-test-label='algorithm-icon'
         aria-hidden='true'
         viewBox='0 0 640 512'
         xmlns='http://www.w3.org/2000/svg'

client/src/templates/Introduction/components/super-block-intro.tsx

@@ -25,17 +25,29 @@ function SuperBlockIntro(props: SuperBlockIntroProps): JSX.Element {
 
   return (
     <>
-      <h1 id='content-start' className='text-center big-heading'>
+      <h1
+        id='content-start'
+        className='text-center big-heading'
+        data-playwright-test-label='superblock-heading'
+      >
         {i18nSuperBlock}
       </h1>
       <Spacer size='medium' />
-      {generateIconComponent(superBlock, 'cert-header-icon')}
+      <div data-playwright-test-label='superblock-icon'>
+        {generateIconComponent(superBlock, 'cert-header-icon')}
+      </div>
       <Spacer size='medium' />
-      {superBlockIntroText.map((str, i) => (
-        <p key={i}>{str}</p>
-      ))}
+      <div data-playwright-test-label='superblock-description-box'>
+        {superBlockIntroText.map((str, i) => (
+          <p data-playwright-test-label='superblock-description-para' key={i}>{str}</p>
+        ))}
+      </div>
       {superBlockNoteText && (
-        <div className='alert alert-info' style={{ marginTop: '2rem' }}>
+        <div
+          className='alert alert-info'
+          style={{ marginTop: '2rem' }}
+          data-playwright-test-label='superblock-note'
+        >
           {superBlockNoteText}
         </div>
       )}

e2e/coding-interview-prep-intro-page.spec.ts

@@ -1,4 +1,5 @@
 import { test, expect, type Page } from '@playwright/test';
+import superblockTexts from '../client/i18n/locales/english/intro.json';
 
 test.describe('Certification intro page', () => {
   let page: Page;
@@ -12,15 +13,47 @@ test.describe('Certification intro page', () => {
     await page.close();
   });
 
-  test('Should have a relevant page title', async () => {
+  test('Should have a relevant page title ', async () => {
     await expect(page).toHaveTitle('Coding Interview Prep | freeCodeCamp.org');
   });
 
-  test('Should render', async () => {
-    await expect(
-      page.locator(
-        "text=If you're looking for free coding exercises to prepare for your next job interview, we've got you covered."
-      )
-    ).toBeVisible();
+  test('Should have course heading and relevant icon image in the superblock', async () => {
+    const heading = page.getByTestId('superblock-heading');
+    await expect(heading).toBeVisible();
+    await expect(heading).toContainText('Coding Interview Prep');
+
+    const superblockIcon = page.getByTestId('superblock-icon');
+    await expect(superblockIcon).toBeVisible();
+
+    const algorithmIcon = superblockIcon.getByTestId('algorithm-icon');
+    await expect(algorithmIcon).toBeVisible();
+  });
+
+  test('Should have relevant course description in the superblock', async () => {
+    const description = page.getByTestId('superblock-description-box');
+    const childParagraphs = description.getByTestId(
+      'superblock-description-para'
+    );
+
+    // container should be visible
+    await expect(description).toBeVisible();
+
+    // container should have 2 paragraphs
+    await expect(childParagraphs).toHaveCount(2);
+
+    // checks if received content is equal to the expected content
+    const receivedTexts = await childParagraphs.allInnerTexts();
+    expect(receivedTexts).toEqual(
+      superblockTexts['coding-interview-prep'].intro
+    );
+  });
+
+  test('Should display the note if it exists', async () => {
+    const noteText = page.getByTestId('superblock-note');
+
+    await expect(noteText).toBeVisible();
+    await expect(noteText).toContainText(
+      superblockTexts['coding-interview-prep'].note
+    );
   });
 });