From c60c6dd733ce6da17981879d3f8bc93a085d751c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luis=20Carden=CC=83a?= <35935591+luisecm@users.noreply.github.com> Date: Fri, 12 Jul 2024 23:15:28 -0600 Subject: [PATCH] add(test): settings inventory playwright tests --- .../PageObjects/Settings/SettingsInventory.ts | 70 +++++---- .../specs/06-settings-inventory.spec.ts | 134 ++++++++++++++++++ playwright/specs/06-settings-inventory.ts | 0 3 files changed, 176 insertions(+), 28 deletions(-) create mode 100644 playwright/specs/06-settings-inventory.spec.ts delete mode 100644 playwright/specs/06-settings-inventory.ts diff --git a/playwright/PageObjects/Settings/SettingsInventory.ts b/playwright/PageObjects/Settings/SettingsInventory.ts index d2a533f6..88452b90 100644 --- a/playwright/PageObjects/Settings/SettingsInventory.ts +++ b/playwright/PageObjects/Settings/SettingsInventory.ts @@ -30,9 +30,10 @@ export class SettingsInventory extends SettingsBase { this.inventoryFrameButton = this.inventoryFrame.getByTestId( "inventory-item-button", ); - this.inventoryFrameEquippedButton = this.inventoryFrame - .locator('[data-cy="inventory-frame"].equipped') - .getByTestId("inventory-item-button"); + this.inventoryFrameEquippedButton = this.inventoryFrame.getByRole( + "button", + { name: "Equipped" }, + ); this.inventoryFrameName = this.inventoryFrame.getByTestId( "inventory-item-name", ); @@ -69,9 +70,8 @@ export class SettingsInventory extends SettingsBase { async getFrame(name: string) { // Locate the element with the test attribute and containing the specified text return this.page - .locator('[data-cy="inventory-item-name"]') - .locator(`text=${name}`) - .locator(".."); + .locator('[data-cy="inventory-item-name"]', { hasText: name }) + .locator("xpath=.."); } async getFrameButtonText(name: string) { @@ -81,39 +81,53 @@ export class SettingsInventory extends SettingsBase { async getFrameContainer(name: string) { return this.page - .locator('[data-cy="inventory-item-name"]') - .locator(`text=${name}`) + .locator('[data-cy="inventory-item-name"]', { hasText: name }) .last() - .locator(".."); + .locator("xpath=.."); } - public async validateInventoryFrames2( + async validateInventoryFrames( expectedFrames: { name: string; type: string }[], ) { - // Array to store the extracted frames let frames: { name: string; type: string }[] = []; + const inventoryFrames = await this.inventoryFrameName; + const inventoryFramesCount = await inventoryFrames.count(); + + for (let i = 0; i < inventoryFramesCount; i++) { + frames.push({ + name: await inventoryFrames.nth(i).textContent(), + type: await inventoryFrames + .nth(i) + .locator('~ [data-cy="inventory-item-type"]') + .textContent(), + }); + } - // Locate all inventory frame names - const frameNames = await this.inventoryFrameName; + expect(frames).toEqual(expectedFrames); + } - // Get the count of the frame names - const count = await frameNames.count(); + async equipFrame(frameName: string) { + const frameButtonText = await this.getFrameButtonText(frameName); + expect(frameButtonText).toHaveText("Equip"); - for (let i = 0; i < count; i++) { - // Get the text of the frame name - const name = await frameNames.nth(i).innerText(); + await this.clickOnFrameButton(frameName); + const frameButtonTextTwo = await this.getFrameButtonText(frameName); + expect(frameButtonTextTwo).toHaveText("Equipped"); + } - // Locate the corresponding type element and get its text - const type = await frameNames - .nth(i) - .locator("[data-cy='inventory-item-type']") - .innerText(); + async unequipFrame(frameName: string) { + const unequipButton = this.profilePictureFrameUnequipButton; + expect(unequipButton).toHaveText("Unequip"); - // Push the extracted data to the frames array - frames.push({ name, type }); - } + const frameContainer = await this.getFrameContainer(frameName); + await expect(frameContainer).not.toHaveClass("equipped"); + await unequipButton.click(); + } - // Validate that the extracted frames match the expected frames - expect(frames).toEqual(expectedFrames); + async validateEquippedFrame(frameName: string) { + await expect(this.profilePictureFrameName).toHaveText(frameName); + await expect(this.profilePictureFrameType).toHaveText( + "Profile Picture Frame", + ); } } diff --git a/playwright/specs/06-settings-inventory.spec.ts b/playwright/specs/06-settings-inventory.spec.ts new file mode 100644 index 00000000..742bacf9 --- /dev/null +++ b/playwright/specs/06-settings-inventory.spec.ts @@ -0,0 +1,134 @@ +import { test, expect } from "@playwright/test"; +import { LoginPinPage } from "../PageObjects/LoginPin"; +import { AuthNewAccount } from "../PageObjects/AuthNewAccount"; +import { ChatsMainPage } from "../PageObjects/ChatsMain"; +import { CreateOrImportPage } from "../PageObjects/CreateOrImport"; +import { SaveRecoverySeedPage } from "../PageObjects/SaveRecoverySeed"; +import { SettingsProfile } from "../PageObjects/Settings/SettingsProfile"; +import { SettingsInventory } from "playwright/PageObjects/Settings/SettingsInventory"; + +test.describe("Settings Inventory Tests", () => { + const username = "test123"; + const status = "test status"; + + test.beforeEach(async ({ page }) => { + // Declare the page object implementations + const createOrImport = new CreateOrImportPage(page); + const authNewAccount = new AuthNewAccount(page); + const loginPinPage = new LoginPinPage(page); + const saveRecoverySeed = new SaveRecoverySeedPage(page); + const chatsMainPage = new ChatsMainPage(page); + const settingsProfile = new SettingsProfile(page); + + // Select Create Account + await createOrImport.navigateTo(); + await createOrImport.clickCreateNewAccount(); + + // Enter Username and Status + await authNewAccount.validateLoadingHeader(); + await authNewAccount.typeOnUsername(username); + await authNewAccount.typeOnStatus(status); + await authNewAccount.buttonNewAccountCreate.click(); + + // Enter PIN + await loginPinPage.waitUntilPageIsLoaded(); + await loginPinPage.enterDefaultPin(); + + // Click on I Saved It + await saveRecoverySeed.buttonSavedPhrase.waitFor({ state: "attached" }); + await saveRecoverySeed.clickOnSavedIt(); + await chatsMainPage.addSomeone.waitFor({ state: "visible" }); + await page.waitForURL("/chat"); + + // Go to Settings Profile and then Settings Inventory page + await chatsMainPage.goToSettings(); + await page.waitForURL("/settings/profile"); + await settingsProfile.buttonInventory.click(); + await page.waitForURL("/settings/inventory"); + }); + + test("J1 - Page should display items purchased from Marketplace", async ({ + page, + }) => { + const settingsInventory = new SettingsInventory(page); + + const expectedFrames = [ + { name: "Moon", type: "Profile Picture Frame" }, + { name: "Skull Dance", type: "Profile Picture Frame" }, + { name: "Kitsune", type: "Profile Picture Frame" }, + { name: "Gamer Headset", type: "Profile Picture Frame" }, + { name: "Doom", type: "Profile Picture Frame" }, + { name: "Ice", type: "Profile Picture Frame" }, + { name: "Elegant", type: "Profile Picture Frame" }, + { name: "Foxy", type: "Profile Picture Frame" }, + { name: "Cat Ears", type: "Profile Picture Frame" }, + { name: "Gems", type: "Profile Picture Frame" }, + { name: "Dragonborn", type: "Profile Picture Frame" }, + { name: "Scale Friends", type: "Profile Picture Frame" }, + { name: "Magma", type: "Profile Picture Frame" }, + { name: "Marble", type: "Profile Picture Frame" }, + { name: "Nature", type: "Profile Picture Frame" }, + { name: "Quaint", type: "Profile Picture Frame" }, + { name: "Robot", type: "Profile Picture Frame" }, + { name: "Stone", type: "Profile Picture Frame" }, + ]; + + await settingsInventory.validateInventoryFrames(expectedFrames); + }); + + test("J2 - After user selects Profile Picture Frame it should be properly displayed everywhere in the app where the user's profile picture appears", async ({ + page, + }) => { + // Equip Quaint inventory frame + const settingsInventory = new SettingsInventory(page); + const settingsProfile = new SettingsProfile(page); + await settingsInventory.equipFrame("Quaint"); + + // Validate the frame is equipped and displayed correctly + await settingsInventory.validateEquippedFrame("Quaint"); + + // Navigate to Profile page and verify frame is displayed + await settingsInventory.buttonProfile.click(); + + await expect(settingsProfile.profileImageFrame).toHaveAttribute( + "src", + "https://cdn.deepspaceshipping.co/frames/quaint.png", + ); + + // Navigate back to Inventory and unequip the frame + await settingsProfile.buttonInventory.click(); + await settingsInventory.unequipFrame("Quaint"); + + // Validate the frame is unequipped + await settingsInventory.buttonProfile.click(); + await settingsProfile.profileImageFrame.waitFor({ state: "detached" }); + }); + + test("J3, J4, J5, J6 - Equipping and unequipping inventory item", async ({ + page, + }) => { + const settingsInventory = new SettingsInventory(page); + + // Equip Quaint inventory frame + await settingsInventory.equipFrame("Quaint"); + + // Validate equipped frame + await expect(settingsInventory.inventoryFrameEquippedButton).toHaveCSS( + "background-color", + "rgb(77, 77, 255)", + ); + await expect(settingsInventory.inventoryFrameEquippedButton).toHaveText( + "Equipped", + ); + + await expect(settingsInventory.profilePictureFrameName).toHaveText( + "Quaint", + ); + await expect(settingsInventory.profilePictureFrameType).toHaveText( + "Profile Picture Frame", + ); + + // Unequip the frame + await settingsInventory.unequipFrame("Quaint"); + }); +}); diff --git a/playwright/specs/06-settings-inventory.ts b/playwright/specs/06-settings-inventory.ts deleted file mode 100644 index e69de29b..00000000