Implementing Page Objects in Playwright

Picture a login screen, such as The-Internet / Login. On this LoginPage, there is:a heading: Login Pagea user name textbox with the label, "Username"a password textbox with the label, "Password"a login button, with the role of a button, and the name of "Login"a flash message that appears if you enter invalid credentials such as "NotAUser" and "NotAPassword".If you successfully log in with "tomsmith" and "SuperSecretPassword!, there is a SecureArea:a heading: "Secure Area"a flash message "You logged into a secure area!"a Logout button. Sure, you could interact with each web element in your test... but what if the username text box locator changes? You would have to update multiple tests every time the element changed. ... Instead, you could place it in a Page Object, something that Playwright handles well! "A page object represents a part of your web application. An e-commerce web application might have a home page, a listings page and a checkout page. Each of them can be represented…