test(e2e, playwright): add E2E tests for video-modal (#51780)

client/src/templates/Challenges/components/video-modal.tsx

@@ -41,12 +41,16 @@ function VideoModal({
   return (
     <Modal dialogClassName='video-modal' onHide={closeVideoModal} show={isOpen}>
       <Modal.Header className='video-modal-header fcc-modal' closeButton={true}>
-        <Modal.Title className='text-center'>
+        <Modal.Title
+          className='text-center'
+          data-playwright-test-label='video-modal-title'
+        >
           {t('buttons.watch-video')}
         </Modal.Title>
       </Modal.Header>
       <Modal.Body className='video-modal-body'>
         <iframe
+          data-playwright-test-label='video-modal-video-player-iframe'
           frameBorder='0'
           src={videoUrl}
           title={t('buttons.watch-video')}

e2e/video-modal.spec.ts

@@ -0,0 +1,43 @@
+import { test, expect } from '@playwright/test';
+import translations from '../client/i18n/locales/english/translations.json';
+
+const currentUrlPath =
+  '/learn/javascript-algorithms-and-data-structures/basic-javascript/increment-a-number-with-javascript';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(currentUrlPath);
+  await page.getByTestId('get-help-dropdown').click();
+  await page.getByTestId('watch-a-video').click();
+});
+
+test.afterEach(async ({ page }) => {
+  await page.close();
+});
+
+test.describe('Exit Video Modal E2E Test Suite', () => {
+  test('Verifies the Correct Rendering of the Video Modal', async ({
+    page
+  }) => {
+    await expect(page.getByTestId('video-modal-title')).toBeVisible();
+    await expect(
+      page.getByTestId('video-modal-video-player-iframe')
+    ).toBeVisible();
+    await expect(
+      page.getByText(translations.learn['scrimba-tip'])
+    ).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: translations.buttons.close })
+    ).toBeVisible();
+  });
+
+  test('Closes the Video Modal When the User clicks on exit button', async ({
+    page
+  }) => {
+    await page
+      .getByRole('button', { name: translations.buttons.close })
+      .click();
+    await expect(
+      page.getByText(translations.buttons['watch-video'])
+    ).not.toBeVisible();
+  });
+});