Test Case of Basic Auth & Broken Images

Author: ravigitgit

constants/configuration.ts

@@ -1,7 +1,7 @@
 // URL'S
 export const URLs = {
-    URL:'https://the-internet.herokuapp.com/',
-    ADD_REMOVE_ELEMENTS: '/add_remove_elements',
-    BASIC_AUTH: '/basic_auth'
-
-  };
+  URL: 'https://the-internet.herokuapp.com/',
+  ADD_REMOVE_ELEMENTS: '/add_remove_elements/',
+  BASIC_AUTH: '/basic_auth',
+  BROKEN_IMAGES: '/broken_images'
+};

playwright.config.ts

@@ -18,9 +18,9 @@ export default defineConfig({
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
+  retries: 0,
   /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
+  workers: 1,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */

tests/TC01.spec.ts

@@ -15,17 +15,61 @@ test('Test Add/Remove Elements', async ({ page }) => {
   await page.locator(".example button:has-text('Add Element')").waitFor({ state: 'visible' });
   await page.locator(".example button:has-text('Add Element')").click();
   await page.locator("#elements button:has-text('Delete')").click();
-  await expect(await page.locator(".added-manually").count()).toBeGreaterThanOrEqual(0);
+
+  const count = await page.locator(".added-manually").count();
+  expect(count).toBeGreaterThanOrEqual(0);
+});
+
+test('Test login with basic auth', async ({ browser }) => {
+  
+  // When Loging in with Basic Auth
+  const context = await browser.newContext({
+    httpCredentials: {
+      username: 'admin',
+      password: 'admin',
+    }
+  });
+
+  const page = await context.newPage();
+  await page.goto(URLs.BASIC_AUTH); // site that triggers basic auth
+  await expect(page).toHaveURL(URLs.BASIC_AUTH); // or any assertion
+  await expect(page.locator('#content p')).toHaveText('Congratulations! You must have the proper credentials.');
+});
+
+test('Test cancel on basic auth', async ({ browser }) => {
+  const context = await browser.newContext({
+    httpCredentials: {
+      username: 'wronguser',
+      password: 'wrongpass',
+    }
+  });
+
+  const page = await context.newPage();
+  await page.goto(URLs.BASIC_AUTH);
+
+  // The page will show a 401 error or some unauthorized message
+  await expect(page.locator('body')).toContainText('Not authorized'); // Adjust this
 });
 
-test('Test Basic Auth', async ({ page }) => {
+test('Test Broken Images', async ({ page }) => {
   await page.goto('/');
-  await page.locator("a:has-text('Basic Auth')").click();
-  await expect(page).toHaveURL(URLs.BASIC_AUTH);
+  await page.locator("a:has-text('Broken Images')").click();
+  await expect(page).toHaveURL(URLs.BROKEN_IMAGES);
 
-  await expect(page.locator(".example button:has-text('Add Element')")).toBeVisible();
-  await page.locator(".example button:has-text('Add Element')").waitFor({ state: 'visible' });
-  await page.locator(".example button:has-text('Add Element')").click();
-  await page.locator("#elements button:has-text('Delete')").click();
-  await expect(await page.locator(".added-manually").count()).toBeGreaterThanOrEqual(0);
+  const images = page.locator('img');
+  const count = await images.count();
+
+  let brokenCount = 0;
+
+  for (let i = 0; i < count; i++) {
+    const img = images.nth(i);
+    const isBroken = await img.evaluate((imgEl) => {
+      return (imgEl as HTMLImageElement).naturalWidth === 0;
+    });
+
+    console.log(`Image ${i + 1}: ${isBroken ? 'BROKEN' : 'OK'}`);
+    if (isBroken) brokenCount++;
+  }
+
+  expect(brokenCount).toBeGreaterThan(0);
 });