danhumphrey / page-modeller

⚙️ Browser DevTools extension for modelling web pages for automation.
MIT License
87 stars 25 forks source link

Added Playwright support. #33

Closed rapidroamer closed 1 year ago

rapidroamer commented 2 years ago

Hi Dan, I've added support for Playwright. Used the following scripts: test, build:dev and zip:chrome Tested it locally using load unpacked extension option.

pageModelDemoPage.ts

pageModelDemo.spec.ts

Playwright tests using model generated by Page Modeller: image

vijaydubber commented 2 years ago

Hi Vijay,

Your naming doesn't match what I have in the other profiles. You don't click, fill, get innerText etc. of locators. These are methods of elements. A locator is used to find an element. Please have a look at the other profiles and resolve. Thanks

Hi Dan, Sorry for that. Playwright locators are a cross over between elements and selectors. https://playwright.dev/docs/api/class-locator. These are like pointers to elements, resolved at run time (something like selenium page factory)

For example:
LoginPage.ts
export class LoginPage extends BasePage {
//default scope is public
readonly userNameText = this.page.locator('#username')
readonly userPasswordText = this.page.locator('#password')
readonly loginButton = this.page.locator('#login')
}
LoginPage.spec.ts
test('login test', async ({page}) => {
 const loginPage = new LoginPage(page)
await loginPage.userNameText.fill('some name')
await loginPage.userPasswordText.type('some password')
await loginPage.loginButton.click()
})

I agree that Playwright's style of scripting doesn't align with the other profiles. I will pull back this PR.

danhumphrey commented 2 years ago

Thanks for the clarification Vijay. No need to pull the PR. Let me take another look