test-for-locked-out-user

tests/lockedUser.spec.ts

@@ -0,0 +1,30 @@
+import { test, expect } from "@playwright/test";
+import { MainPage } from "./pages/MainPage";
+import usersData from "../fixtures/usersData.json";
+
+test.describe("Tests for locked user", () => {
+  test("Attempt to login with locked user creds", async ({ page }) => {
+    const mainPage = new MainPage(page);
+    const username = usersData.users[1];
+    const password = usersData.password;
+
+    await mainPage.visitMainPage();
+    await mainPage.fillUsername(username);
+    await mainPage.fillPassword(password);
+
+    await expect(page.locator('input[name="user-name"]')).toHaveValue(username);
+    await expect(page.locator('input[name="password"]')).toHaveValue(password);
+
+    await mainPage.loginButton();
+    await page.getByPlaceholder("Username").isVisible();
+    await expect(page.locator("svg.error_icon").first()).toBeVisible();
+    await page.getByPlaceholder("Password").isVisible();
+    await expect(page.locator("svg.error_icon").last()).toBeVisible();
+    await expect(
+      page.locator('div[class*="error-message-container"]')
+    ).toBeVisible();
+    await page
+      .getByAltText("Epic sadface: Sorry, this user has been locked out.")
+      .isVisible();
+  });
+});

tests/pages/MainPage.ts

@@ -1,10 +1,10 @@
-import { Page } from '@playwright/test';
+import { Page } from "@playwright/test";
 
 export class MainPage {
   constructor(private page: Page) {}
 
   async visitMainPage() {
-    await this.page.goto('/');
+    await this.page.goto("/");
   }
   async fillUsername(username: string) {
     await this.page.fill('input[name="user-name"]', username);
@@ -13,6 +13,12 @@ export class MainPage {
     await this.page.fill('input[name="password"]', password);
   }
   async loginButton() {
-    await this.page.click('#login-button');
+    await this.page.click("#login-button");
+  }
+  async loginErrorMessage() {
+    this.page.locator('div[class*="error-message-container"]');
+  }
+  async closeSvgIconForFields() {
+    this.page.locator("svg.error_icon");
   }
 }