Introduction
I am on a mission to streamline my e2e testing code using the Page Object Model for easier maintenance and debugging.
My Approach
When embarking on creating end-to-end tests with Protractor, I follow these steps to implement the Page Object Model:
- Open the page in a web browser that needs to be tested,
- Access the developer tools (F12),
- Use the inspect tool to analyze the DOM structure of the page, identifying IDs, classes, and CSS Selectors for elements needed for the Page Object Model,
- Begin coding while ensuring that elements build upon previously defined ones. I segment my code into different classes.
For illustration, here is a simplified example based on step 4:
class genericPageWithTable {
get Frame1() {
return element(by.id('someId'));
}
get Table1() {
return this.Frame1.element(by.tagName('table'));
}
}
class specificTable extends genericPageWithTable {
get specificElement {
return this.Table1.element(by.className('specificElement'));
}
}
A test with the following assertion was written:
expect(specificElement.getText()).toBe('someString');
The frustration sets in when the test fails due to undefined not having a getText() method...
Issue at Hand
It becomes challenging to identify which element was undefined and determine where methods returned no elements. The trustworthiness of the methods comes into question.
To troubleshoot, I run protractor --elementExplorer to validate each locator entry...
yet, things seem to work here. As a next step, I incorporate
browser.wait(EC.visibilityOf(...))async and await helps somewhat, but pinpointing where undefined occurs remains difficult in many cases.
Even resorting to breakpoints and debugging adds to the confusion at times, as the flow can be unpredictable.
Inquiries
I seek answers to the following questions:
- What strategies can enhance my approach to building Page Object Model code for improved maintainability and ease of debugging? Are there alternatives to relying solely on developer tools in browsers for coding purposes?
- How can I effectively ensure the correctness of my Page Object Model code without overwhelming readers of test outputs who expect results aligned with business goals?