21 May 2024 Leave a comment Tech-Help
If you’re new to Protractor and struggling to implement effective end-to-end (e2e) tests, especially when dealing with non-Angular pages, you’re not alone. One common issue is ensuring that Protractor waits for a page element to be fully loaded before interacting with it. This guide will help you understand how to use Protractor’s Expected Conditions to achieve this.
Using Expected Conditions in Protractor
Protractor provides a set of predefined conditions that you can use to explicitly wait for certain elements or states. This is particularly useful when you need to wait for an element to become present, visible, clickable, etc.
Waiting for an Element to be Present
The following example demonstrates how to wait for an element to be present using Protractor’s Expected Conditions:
var EC = protractor.ExpectedConditions;
var e = element(by.id('xyz'));
browser.wait(EC.presenceOf(e), 10000);
expect(e.isPresent()).toBeTruthy();
In this example, the code waits up to 10 seconds for the element with the ID ‘xyz’ to be present. Once the element is detected, it asserts that the element is indeed present.
Waiting for an Element to be Clickable
Similarly, you can wait for an element to be clickable:
var EC = protractor.ExpectedConditions;
var e = element(by.id('xyz'));
browser.wait(EC.elementToBeClickable(e), 10000);
e.click();
This code waits for the element to be clickable before attempting to click it.
Practical Example: Navigating to a Contact Page
Let’s consider a practical example where you need to navigate to a contact page after a login operation. Here’s how you can implement this:
describe('should open contact page', function() {
var ptor = protractor.getInstance();
beforeEach(function() {
var Login = require('./util/Login');
new Login(ptor);
});
it('should wait for the contact link to be clickable', function() {
var EC = protractor.ExpectedConditions;
var contactLink = element(by.xpath("//a[@href='#/contacts']"));
browser.wait(EC.elementToBeClickable(contactLink), 10000);
contactLink.click();
expect(contactLink.isPresent()).toBeTruthy();
});
});
In this example, the test waits for the contact link to be clickable before clicking on it, ensuring that the page has fully loaded.
Conclusion
Using Protractor’s Expected Conditions is a robust way to handle asynchronous operations in your e2e tests. It ensures that your tests wait for the necessary conditions before proceeding, thereby reducing the chances of flaky tests.
Enhancing Your Testing Workflow with Repeato
For those looking to streamline their testing process, consider using Repeato. Repeato is a no-code test automation tool for iOS and Android that allows you to create, run, and maintain automated tests for your apps quickly and efficiently. With its intuitive test recorder and advanced scripting interface, Repeato makes it easy to handle complex use cases.
Repeato already supports testing websites inside an Android emulator or device, and explicit web testing support is on its way later this summer. This makes it an excellent choice for enhancing your testing workflow, especially when dealing with intricate conditions that require precise timing.
For more information on how to get started with Repeato, visit our Getting Started page.
