There are a few things we would like you to understand before going further.
For writing automated e2e tests you will need the ability to select page elements. Once the requested site is opened in browser, you'll first have to grab the page elements before interacting with them, such as selecting a
text field to write text or a
button to click.
Selecting page elements is the primary building block of an e2e test. There are various ways in ZWL to select an element such as using it's attributes (id, name, role, data-testid), tag, css selector or text. For example, the following code selects a
button element by it's text and clicks on it.
buttonSubmit = findElement('Submit', by.text)click(buttonSubmit)
This was easy enough. You can opt similar ways to select page elements before interacting with them. We have a guide that helps building other types of selectors in later chapters and explains this in detail.
#Waits and manual waits
Most applications on the web are asynchronous which means they allow you to interact with the web page while some other part is being updated without reloading or disabling whole page access. E2E tests in these applications require some sort of waiting mechanism to be able to verify the update.
For example, in some app a user performs an action which leads to an update. To verify the update in test, we will have to wait until the update is completed. Since the time it takes to update can't be known in advance we can't put a manual wait. ZWL helps in these situations by:
Automatically waiting whenever an element is being found.
If you are finding an element, ZWL will wait automatically until it appears on page. This means if the async update creates a new page element, you can just refer to it using a selector and ask ZWL to find it. ZWL will automatically wait until it has found it (you can also disable automatic waiting every time you find elements, we will discuss this use case in later chapters).
Providing manual wait functions for every possible use case.
When an async update doesn't create new elements but just update existing ones, you can wait for that to happen manually. For example, a form can disable it's submit button on submission and enable it only after the data is saved. A test that needs to verify that the button becomes enabled after the form is saved can apply a manual wait like so:
button = findElement('Submit', by.text)click(button)# Button is clicked but let's first wait until it is disabled as it may not disable immediately.# If we don't use it, the next wait can return immediately finding the button already enableduntilDisabled(button) # button is now disableduntilEnabled(button) # button is now enabled# proceed to next action such as trying to submit form again
Just a little function call and ZWL will wait until form is saved and button is available again. There are many of similar manual wait functions that can be used for different use cases.
There will be lot more information about various waits and detail of this concept in later chapters.