Applitools provides us different types of options to verify apps at different levels, such as checking at the window or region level, et cetera. These are called checkpoints.
In this tutorial, we are going to see some different types of checkpoints available in Applitools.
Let's consider a scenario.
What if we have an app with a very large DOM structure beyond the currently visible viewport and want the entire page to be verified?
We have an example of this in the Elemental Selenium website.
Here, as you can see, we have a very long DOM structure, which scrolls both vertically as well as horizontally.
To instruct Applitools to verify this entire page, regardless of how much area is visible on the screen, we can use:
eyes.force_full_page_screenshot = value
We can tweak our
validate_window function with this. Let's do that now.
This is the
conftest.py file that we have been working so far in this video series.
Here, above the
validate_window, we can set an additional property (
force_full_page_screenshot and set this to “True”.
def validate_window(driver, eyes, tag=None): open_eyes(driver, eyes) eyes.force_full_page_screenshot = True eyes.check_window(tag=tag) close_eyes(eyes)
Here we have our test function, which launches the-internet app and then validates the window with a full-page screenshot.
from automation.tests.conftest import validate_window def test_full_page_screenshots(driver, eyes): validate_window(driver, eyes)
Let's run this test now.
As you can see, Applitools is scrolling both vertically and horizontally and capturing multiple screenshots for this application under test. Cool, the test passed.
Let's take a look in the Eyes Manager.
We can see our test ran, and as you can see, it has captured the entire DOM structure for our app and our test.
Let's run this test again to see the comparison in action.
Cool, the test passed.
As we can see, another test is created, and we can see that Applitools has done a comparison against this large DOM structure between the baseline and the checkpoint.
Let's take a look at another checkpoint available to us. On certain occasions, we might want to verify just a specific element on the page.
Let's assume that we are interested only in Agile Testing book on the Automation Bookstore homepage.
This can be done by adding a new method in our
Let's do that now. Let's add a new method to verify a specific element on our application under test.
Let's call this
validate_element and ensure we pass a webelement to this.
Now, instead of calling
check_window, we can call a
check_region method in the
eyes instance and pass it the webelement.
def validate_element(driver, eyes, element, tag=None): open_eyes(driver, eyes) eyes.check_region(element, tag=tag) close_eyes(eyes)
If we take a look at the _Automation Bookstore _website, let's inspect the DOM, we can see that the Agile Testing book has an
id of “pid3”.
Let's add a test to verify the specific element on the homepage. We will find our Agile Testing element (using “pid3”) and call
validate_element from our
from automation.tests.conftest import validate_element def test_book_by_region(driver, eyes): element = driver.find_element_by_id('pid3') validate_element(driver, eyes, element)
Let's run this test now. The test passed.
Let's run it again so that it compares against the baseline. Cool, the test passed.
Let's take a look at the Applitools Eyes website. We can see that our
test_book_by_region test has run.
As we can see, Applitools has only captured the screenshot for the Agile Testing book with just the webelement under a given specific region.
There is one final checkpoint that I want to introduce you to.
In certain cases, we might want to visually verify web controls which fall under an iframe.
Let's see an example of this.
In the Elemental Selenium website, we have a simple WYSIWYG editor where the content is under an iframe.
If we inspect the DOM for this webpage, we can see that the content area falls under an iframe.
We can visually verify this by adding our method in our
conftest.py file. Let's do that now.
Let's add another method, `validate_frame, to verify a specific region within a frame.
We will make this function accept a
frame_reference and a
region within that frame.
def validate_frame(driver, eyes, frame_reference, region, tag=None): open_eyes(driver, eyes) eyes.check_region_in_frame(frame_reference, region, tag=tag) close_eyes(eyes)
Let's add the test for this.
For this function to work, we need to pass it a
frame_reference, which is a unique
ID to identify the frame in our DOM structure.
If we inspect the DOM structure for this webpage, we will notice that this is the only iframe that's present.
We can use the
TAG_NAME property to identify this iframe on the webpage.
Let's call our
Also, we need to specify the region that we want to verify inside this. In this particular test, let's say we are only interested in the Editor area.
As we can see, this has a unique
ID. We can pass a locator
By.ID as region to our function.
def test_element_in_frame(driver, eyes): frame = driver.find_element(By.TAG_NAME, 'iframe') validate_frame(driver, eyes, frame, (By.ID, 'tinymce'))
Let's run our test now.
Let's run the test again so that it compares again the baseline. Cool. We can see the test passed.
Let's check in Eyes Manager. As we can see, our test has run.
And if you observe, Applitools has automatically switched to the iframe and verified the region under the app.
Applitools Documentation: force_full_page_screenshot property
Applitools Documentation: check_region_in_frame_by_selector method