page objects: break out displayed list related functionality to its o…

…wn page class

tests/adding-items.spec.ts

@@ -1,19 +1,26 @@
 import { test, expect, Locator } from "@playwright/test";
 import { TodoForm } from "./page-classes/todo-form.ts";
+import { TodoList } from "./page-classes/todo-list.ts";
 
 let todoForm: TodoForm;
 let newTodoField: Locator;
-let displayedTodoItems: Locator;
+
+let todoList: TodoList;
 let countOfRemainingToDos: Locator;
 
+let displayedTodoItems: Locator;
+
+
 test.beforeEach(
     async({ page })=>{
         await page.goto("https://todomvc.com/examples/emberjs/todomvc/dist/");
 
         //Invoke the page object to grab locator(s)
         todoForm = new TodoForm(page);
         newTodoField = todoForm.newToDoField();
-        countOfRemainingToDos = todoForm.countOfRemainingToDos();
+
+        todoList = new TodoList(page);
+        countOfRemainingToDos = todoList.countOfRemainingToDos();
 
         //Instead of the li, you could even target the label inside the li directly which embeds the text, like so:
         //".todo-list label"
@@ -64,6 +71,7 @@ test.describe("when adding multiple todo items",
         )
         test("should be shown all the added items",
             async( {page} ) => {
+                await expect(displayedTodoItems).toHaveCount(2);
                 await expect(displayedTodoItems).toHaveText(["feed the dog", "snuggle with the cat"]);
             }
         );

tests/page-classes/todo-form.ts

@@ -19,10 +19,6 @@ export class TodoForm {
     newToDoField(){
         return this.page.locator(".new-todo");
     }
-
-    countOfRemainingToDos(){
-        return this.page.locator(".todo-count");
-    }
 
     /*
     ********************************************************************************

tests/page-classes/todo-list.ts

@@ -0,0 +1,28 @@
+import { Page } from "@playwright/test"
+
+export class TodoList{
+    page: Page;
+
+    constructor(page: Page){
+        this.page = page;
+    }
+
+    /*
+    ********************************************************************************
+    Functions that return page locators. 
+    Each function returns a Type called "Locator" which in turn resolves to the elements
+    right before performing an action.
+    ********************************************************************************
+    */
+
+    countOfRemainingToDos(){
+        return this.page.locator(".todo-count");
+    }
+
+    /*
+    ********************************************************************************
+    Functions that act on page locators (locators 
+    resolve to elements right before they're acted on) 
+    ********************************************************************************
+    */
+}