Aquabot Test Project – Part 4

Hi guys!

In the last post, we automated Test Cases 03 and 04 of our test case list written in Part 2.

Now we will go back to Test Cases 01 and 02. But first I will introduce one new concept.

DOM Modifications

DOM is the Document Object Model of the page.

The HTML DOM is a standard object model and programming interface for HTML. It defines:

• The HTML elements as objects
• The properties of all HTML elements
• The methods to access all HTML elements
• The events for all HTML elements

Sometimes we will need to change some properties in the DOM for us to perform our testing, and it is what we will do for our tests cases in this post.

Reload page validation

Let’s take a look at our first test case:

Scenario Test Case 01 - Clicking on the Aquabot logo
Given I am on the Aquabot Testing Playground home page  
When I click on the Aquabot logo  
Then the page will be reloaded  
And I will be redirected to the Aquabot Testing Playground home page 

After we click on the site logo that page will be reloaded, and we will see the same page again, but, how we will validate that the page is reloaded?

That is where the DOM modifications come in handy!

When a page reloads, it goes back to the initial state, so all the changes that the user had done with it will be lost. Some pages store the user’s modifications, but it is not our case.

So, all we need to do is add a modification to our page and verify that this property is not there anymore after the page reloads.

First, we need to add our change and verify that the modification is there:

cy.window().then(w => w.beforeReload = true)
cy.window().should('have.prop', 'beforeReload', true)

Then, we click on the logo and verify if the property is not there anymore:

cy.get('.logo-image > img').click()    cy.window().should('not.have.prop', 'beforeReload')

And that’s it. Simple, isn’t it?

The complete test is like this:

beforeEach(() => {
    cy.visit('https://aquabottesting.com/index.html')
})

it('clicks on aquabot logo should reload the page', () => {
    cy.window().then(w => w.beforeReload = true)
    cy.window().should('have.prop', 'beforeReload', true)
    cy.get('.logo-image > img').click()
    cy.window().should('not.have.prop', 'beforeReload')
})

The next test case has the opposite behavior of the first one, let’s see:

Scenario Test Case 02 -Clicking on Home Button
Given I am on the Aquabot Testing Playground home page  
When I click on the Home button
Then the system will do nothing 

And now, how do we validate that the system didn’t change?

The same way we verified that the property that we added at the DOM disappeared, now we just have to verify that the property is still there!

cy.window().should('have.prop', 'beforeReload')

And the complete test will be like the following:

beforeEach(() => {
    cy.visit('https://aquabottesting.com/index.html')
})

it('clicks on Home button nothing will happen', () => {
    cy.window().then(w => w.beforeReload = true)
    cy.window().should('have.prop', 'beforeReload', true)
    cy.contains('Home').click()
    cy.window().should('have.prop', 'beforeReload')
})

It is just it for this post, verify our project on this link and see you at the next one.