Tooltips
Tooltips are web elements that are usually used to provide additional explanations to the user, usually when the user hovers over another element. They look something like this: the user hovered over a button and a tooltip appeared.
So, let’s create some tooltip tests:
1: Create a new test file under e2e/elements_manipulation and call it, for example, tooltips.cy.js.
2: Write the following tests inside:
/// <reference types="Cypress" />
describe('Tooltips: Tooltips actions', () => {
beforeEach('Navigate to Tooltips page', () => {
cy.visit('/tool-tips');
});
it('Check button tooltip hover', () => {
//Perform hover over button element
cy.get('#toolTipButton').trigger('mouseover');
//Assert that tooltip is visible and contains expected text
cy.get('.tooltip-inner').should('be.visible').and('contain', 'You hovered over the Button');
});
it('Check input tooltip hover', () => {
//Perform hover over input element
cy.get('#toolTipTextField').trigger('mouseover');
//Assert that tooltip is visible and contains expected text
cy.get('.tooltip-inner').should('be.visible').and('contain', 'You hovered over the text field');
});
it('Check text tooltip hover', () => {
//Perform hover over text element
cy.contains('Contrary').trigger('mouseover');
//Assert that tooltip is visible and contains expected text
cy.get('.tooltip-inner').should('be.visible').and('contain', 'You hovered over the Contrary');
});
});
Code explanation:
Before each test, we will first navigate to our desired test page with tooltips: page
Test 1 (Tooltip over button):
Line 10: We will get ID of our button, and we will use Cypress trigger event to simulate mouseover action (hover action)
Upon previous step, a tooltip should appear.
Line 12: We are getting a tooltip locator, and we are asserting that it is visible and contains correct text.
Test 2 (Tooltip over input):
Line 16: We will get ID of our input field, and we will use Cypress trigger event to simulate mouseover action (hover action)
Upon previous step, a tooltip should appear.
Line 19: We are getting a tooltip locator, and we are asserting that it is visible and contains correct text.
Test 3 (Tooltip over text):
Line 24: We will get text elements by cypress “contains” method of getting element, and we will use Cypress trigger event to simulate mouseover action (hover action).
Upon previous step, a tooltip should appear.
Line 26: We are getting a tooltip locator, and we are asserting that it is visible and contains correct text.
ℹ️ Learn more about trigger event: trigger
ℹ️ Learn more about tooltips: tooltips
ℹ️ Tip: When trying to get the element of a tooltip (inspect tooltip element via developer tools in Chrome or other browser), tooltip will disappear, and you wouldn’t be able to see tooltip in the DOM. My advice on how to find a tooltip element selector is to write a test that will do a hover action and display the tooltip, and then inside Cypress CLI desktop app, in the debugger, try to inspect the tooltip element. Cypress CLI freezes the state of the browser, so the tooltip will stay in its place, and you will be able to get tooltip selector/locator.
Alerts
Alerts are elements that display a box in a browser window and usually contains some option in it. They look something like this:
So, let’s write some tests for alerts to see them in action.
1: Create a new test file under e2e/elements_manipulation and call it, for example, alerts.cy.js.
2: Write the following tests inside:
/// <reference types="Cypress" />
describe('Alerts: Alerts actions', () => {
beforeEach('Navigate to Alerts page', () => {
cy.visit('/alerts');
});
it('Check alert confirmation', () => {
//Create a stub method on window confirm alert
const stub = cy.stub();
cy.on('window:confirm', stub);
//Click on alert confirm button and assert that alert is called with correct text
cy.get('#confirmButton').click().then(() => {
expect(stub.getCall(0)).to.be.calledWith('Do you confirm action?');
});
//Select ok in alert
cy.on('window:confirm', () => true);
//Assert that confirmation text is visible
cy.contains('You selected Ok').should('be.visible');
});
it('Check alert cancellation', () => {
//Create a stub method on window confirm alert
const stub = cy.stub();
cy.on('window:confirm', stub);
//Click on alert confirm button and assert that alert is called with correct text
cy.get('#confirmButton').click().then(() => {
expect(stub.getCall(0)).to.be.calledWith('Do you confirm action?');
});
//Select cancel in alert
cy.on('window:confirm', () => false);
//Assert that confirmation text is visible
cy.contains('You selected Cancel').should('be.visible');
});
});
Code explanation:
Before each test, we will first navigate to our desired test page with alerts: page. We will automate an alert that has two options, to confirm or cancel.
Test 1 (Check if user can do confirm action on alert event):
Line 10: We will first create a stub. A stub is a way to modify a function and delegate control over its behaviour to you (the programmer). You generally stub a function when it has side effects you are trying to control. In this case of alert’s, we can’t just take the element of ok/cancel button and click on it because Cypress is unable to interact with them as normal web elements.*
Line 11: We are observing browser event window:confirm (alert box) and applying stub because we want to interact with it when it happens.
Line 13: We are clicking on the third button “Click me” in our app and upon that click ->
Line 14: we are expecting that our stub function was called with correct alert text
Line 17: we are performing an action on window:confirm and providing value “true”, which is equal to the action of clicking on “Ok” button
Line 19: We are asserting that correct confirmation text is displayed on our page after alert selection
Test 2 (Check if user can do cancel action on alert event):
Line 24: We will first create a stub.
Line 25: We are observing browser event window:confirm (alert box) and applying stub because we want to interact with it when it happens.
Line 27: We are clicking on the third button “Click me” in our app and upon that click ->
Line 28: we are expecting that our stub function was called with correct alert text
Line 31: we are performing an action on window:confirm and providing value “false”, which is equal to the action of clicking on “Cancel” button
Line 33: We are asserting that correct cancellation text is displayed on our page after alert selection
ℹ️ *Cypress handles alerts in its own way. It performs auto accept of the alert message without asking user to accept explicit. There is no way to read ALERT message in inbuilt cypress. But there is a way hitting browser command “window:alert or window:confirm” you can read the text present in alert window.
ℹ️ Learn more about alerts: alerts
Frames
A frame, or iFrame, is an HTML element that loads another HTML page within the document. It essentially puts another webpage within the parent page. They are commonly used for inserting payment method forms from third parties, advertisements, embedded videos, web analytics and interactive content.
You can’t really see that element is an iframe until you open developer tools and check DOM. In case of iframes, DOM usually displays it like this:
So, let’s write some tests for iframes to see them in action.
1: Create a new test file under e2e/elements_manipulation and call it, for example, iframe.cy.js.
2: Write the following tests inside:
/// <reference types="Cypress" />
describe('iFrames: iFrames actions', () => {
before('Navigate to iFrame page', () => {
cy.visit('/frames');
});
it('Check iFrame content', () => {
//Create function to return the iframe and assert that it is not empty
const getIframeBody = () => {
return cy
.get('#frame1')
.its('0.contentDocument.body')
.should('not.be.empty')
.then(cy.wrap);
};
//Assert that iframe is visible
getIframeBody().should('be.visible');
//Assert that iframe contains heading with correct text
getIframeBody().find('#sampleHeading').should('contain', 'This is a sample page');
});
});
Code explanation:
Before our test, we will visit our test page with iframes: page
In this test we will get the first iframe and assert that it is visible and contains correct text.
Line 10 to line 16: we are creating a new function that will return our iframe with all its content. We are getting the ID of an iframe, it’s body, we are asserting that is not empty and we are wrapping all that in our function called for example getIframeBody.
Now that we have a function that returns our iframe, we can call it and find elements that are inside of the iframe. In our case, we only have text inside.
Line 18: We are asserting that our iframe is visible
Line 20: Since we only have some text in it, we are getting ID of our text and asserting that it contains correct text. *
ℹ️ *In real life, iframes are usually more complex, for example it can be a credit card payment form where you need to fill in credit card details in order to pay for something. So if you want to automate that kind of scenario, you would again create exactly the same function as we did here and call it to find all input elements, buttons etc inside the iframe and interact with it.
ℹ️ Learn more about iframes: iframes
HOMEWORK
1: Write more scenarios for above elements if you can think of some (we didn’t cover all alert cases, so you can try to write more of them)
2: Visit links provided in the lesson, learn and understand what are tooltips, iframes, alerts. Practice how to find tooltip selector, how to get iframe and interact with it, how to manipulate alerts.
Don’t forget to push everything you did today on Github 😉 Remember git commands?
git add .
git commit -am "add: tooltip, alert, iframe tests"
git push
SEE YOU IN LESSON 9!
Completed code for this lesson
If you have learned something new, feel free to support my work by buying me a coffee ☕
Top comments (0)