Make navigation for challenge slick carousel and corresponding test

src/test/playwright/PO/ChallengeInfoPage.js

@@ -1,9 +1,17 @@
 
 import BasePage from "./BasePage";
+import { expect } from "@playwright/test";
 
 class ChallengeInfoPage extends BasePage {
     constructor(page) {
         super(page);
+        this.viewChallengeButton = page.getByRole("button", { name: "Переглянути челендж" });
+        this.viewChallengeTitle = page.locator("span.title");
+        this.slickCard = page.locator("div.slick-slide");
+        this.slickCardsNames = page.locator("div.slick-slide div.name");
+        this.slickDots = page.locator("ul.slick-dots li");
+        this.slickRightArrow = page.locator("div.challenge-day-block span[aria-label='arrow-right']:nth-child(2) svg");
+
         this.challengePageTitle = page.locator("h1.ant-typography");
         this.challengeSortNumber = page.locator("input#sortNumber");
         this.challengeStatus = page.locator("button#isActive");
@@ -15,6 +23,37 @@ class ChallengeInfoPage extends BasePage {
         this.challengeTasksNames = page.locator("td:nth-child(2)");
     }
 
+    async openViewChallenge() {
+        await this.viewChallengeButton.click();
+        await this.verifyElementVisibility(this.viewChallengeTitle);
+    }
+
+    async verifyTaskOnChallengeView(taskName) {
+        // Step 1: Verify the existence of the task in the slick carousel
+        await this.verifyElementExistance(this.slickCardsNames, taskName);
+
+        // Step 2: Find the target card based on the provided taskName
+        const targetCard = await this.slickCard.filter({ hasText: taskName });
+
+        // Step 3: Loop through challenge tasks until the target card is active
+        await this.navigateToTargetTask(targetCard);
+    }
+
+    async navigateToTargetTask(targetCard) {
+        const dotsCount = await this.slickDots.count();
+
+        let i = 0;
+        while (i < dotsCount && !(await this.isCardActive(targetCard))) {
+            await this.slickRightArrow.click();
+            i++;
+        }
+        expect(await this.isCardActive(targetCard)).toBeTruthy();
+    }
+
+    async isCardActive(card) {
+        const slickClass = await card.getAttribute("class");
+        return slickClass.includes("slick-active");
+    }
 }
 
 module.exports = ChallengeInfoPage;

src/test/playwright/PO/basepage.js

@@ -1,4 +1,4 @@
-import { expect} from "@playwright/test";
+import { expect } from "@playwright/test";
 
 class BasePage {
     constructor(page) {
@@ -51,16 +51,14 @@ class BasePage {
 
     //use the method above to make assertion
     async verifyElementExistance(allElements, name, doesExist = true) {
-        if ((await this.isItFirstPage())) {
+        if (await this.isItFirstPage()) {
             await this.paginationFirstPage.click();
         }
-        const isElementPresent = await this.isElementWithNamePresent(allElements, name)
-        doesExist
-            ? expect(isElementPresent).toBe(true)
-            : expect(isElementPresent).toBe(false);
+        const isElementPresent = await this.isElementWithNamePresent(allElements, name);
+        doesExist ? expect(isElementPresent).toBe(true) : expect(isElementPresent).toBe(false);
     }
 
-    async verifyUrl(expectedUrl){
+    async verifyUrl(expectedUrl) {
         const currentUrl = await this.page.url();
         expect(currentUrl).toBe(expectedUrl);
     }
@@ -72,11 +70,11 @@ class BasePage {
         );
     }
 
-    async isItFirstPage(){
+    async isItFirstPage() {
         return (
             (await this.paginationFirstPage.isVisible()) && 
             !(await this.paginationFirstPage.getAttribute("ant-pagination-item-active"))
-        )
+        );
     }
 
     async goToNextPage() {

src/test/playwright/tests/challengesManipulation-test.spec.js

@@ -15,10 +15,6 @@ let apiservice, challengespage, challengeinfopage,taskspage, addchallengepage, a
         apiservice = new ApiService(page);
         challengespage = new ChallengesPage(page);
         await apiservice.apiLoginAs('admin');
-        // await apiservice.deleteChallengeBySequenceNumber(newChallengeCorrectDetails.SEQUENCE_NUMBER)
-        // await apiservice.deleteChallengeBySequenceNumber(editedChallengeCorrectDetails.SEQUENCE_NUMBER)
-        // await apiservice.deleteTaskByName(editedTaskCorrectDetails.NAME);
-        // await apiservice.deleteTaskByName(newTaskCorrectDetails.NAME);
     })
 
     test("Verify that a new challenge can be successfully created", async ({ page }) => {
@@ -171,9 +167,28 @@ let apiservice, challengespage, challengeinfopage,taskspage, addchallengepage, a
     });
 
 
-    // test("Verify that the user can navigate through challenge's existing tasks", async({page})=>{
-    //     await apiservice.createNewChallenge();
-    // })
+    test("Verify that the user can navigate through challenge's existing tasks", async({page})=>{
+        taskspage = new TasksPage(page);
+        challengeinfopage = new ChallengeInfoPage(page);
+        await apiservice.deleteTaskByName(createTaskRequest.body.name);
+        await apiservice.deleteTaskByName(createTaskRequest2.body.name);
+        await apiservice.deleteTaskByName(createTaskRequest3.body.name);
+        await apiservice.deleteTaskByName(createTaskRequest4.body.name);
+
+        await apiservice.createNewChallenge(createChallengeRequest);
+        await apiservice.createNewTask(createTaskRequest);
+        await apiservice.changeTaskDateToToday(createTaskRequest.body.name);
+        await apiservice.createNewTask(createTaskRequest2);
+        await apiservice.changeTaskDateToToday(createTaskRequest2.body.name);
+        await apiservice.createNewTask(createTaskRequest3);
+        await apiservice.changeTaskDateToToday(createTaskRequest3.body.name);
+        await apiservice.createNewTask(createTaskRequest4);
+        await apiservice.changeTaskDateToToday(createTaskRequest4.body.name);
+        await challengespage.gotoChallengesPage();
+        await challengespage.openChallengeInfoPage(createChallengeRequest.body.sortNumber);
+        await challengeinfopage.openViewChallenge();
+        await challengeinfopage.verifyTaskOnChallengeView(createTaskRequest4.body.name);
+    })
 
 
     test.afterEach(async({page})=>{