In a hypothetical scenario where an Angular app consists of two pages - one for contacts (featuring a table with contacts and an "add new contact" button) and another for adding a new contact, the following steps can be outlined:
- Click on the "add" button
- Verify that the "new contacts" page opens
- Enter the contact's details
- Press the "add" button
- Confirm that the new contact appears in the table
For these pages, there are predefined page objects with functions such as "clicking a button" or "entering data into a field", each of which returns promises.
When it comes to writing the test scenario, one approach could be chaining methods using JavaScript, like so:
contactPage.clickAddButton()
.then(function () {
return newContactPage.checkUrl();
})
.then(function () {
return newContactPage.inputData(data);
})
.then(function () {
return newContactPage.clickAddButton();
})
.then(function () {
return checkContact(data);
})
.then(function (success) {
}, function (error) {
console.error(error);
});
Alternatively, the scenario can also be written without method chaining, simply executing each action sequentially:
contactPage.clickAddButton();
newContactPage.checkUrl();
newContactPage.inputData(data);
newContactPage.clickAddButton();
checkContact(data);
Furthermore, considering whether to split the scenario into multiple "it" functions is another aspect worth contemplating.