1. How can I get the Text content in cypress?
Cypress doesn’t provide get text method on element using jQuery Native DOM method we can get the text like below
Option 1: Get the text using jQuery method
Option 2: Assert directly using should and have.text
Option 3: Use invoke function to get the text
Option1: Get the text using JQuery method
Example:
cy.get('#customers').then(($ele)=>{
cy.log($ele.text()); //logs the text
})
Option 2: If we want to verify text we can directly use it, we don’t have to use above method
Example:
cy.get('div').should('have.text', 'foobarbaz')
Option 3: we can use invoke function to get the text
Example:
cy.log("**********"+text); //logs the text
});
2. What is cy.contains command?
cy.contains() command can be used to find the element by using their contents
Example:
cy.contains('Hello')
//This returns the first matching element which is
having text hello
cy.get('.button').contains('Clickme')
//This returns element with .button class having text Click me
3. How can we use browser Navigation in Cypress?
Cypress provides a way to navigate back and forward in browser
cy.go() function can be used for this purpose
cy.go('back') or cy.go(-1) is used to navigate to previous browser history
cy.go('forward') or cy.go(1) is used to go forward in browser history
Example:
cy.go('back')
cy.location('pathname').should('not.include', 'navigation')
cy.go('forward')
cy.location('pathname').should('include', 'navigation')
// clicking back
cy.go(-1)
cy.location('pathname').should('not.include', 'navigation')
// clicking forward
cy.go(1)
cy.location('pathname').should('include', 'navigation')
4. How can I wait for element to be visible in Cypress?
Cypress internally wait for element before performing any action. However we can use the below code as a workaround whenever necessary
cy.get('.somelement', { timeout: 10000 }).should('be.visible');
5. How can I click hidden element?
Most of the type in other automation framework if element is not visible or interactable we get error message but cypress provides a way to click on hidden element using {force:true} option
Example:
cy.get('.checkbox').check({ force: true })
6. How can I get the browser Properties in Cypress?
Cypress.browser gives the all browser properties such as name, path, headless, channel etc.
Example:
let browserName = cypress.browser.name
7. List of some cypress function which will be useful for traversing DOM?
Note: Any one can be asked to explain or some of them will be asked in Interview
Cypress framework by default provides many traversal functions
.prev(): .prev() is used to get the immediately preceding sibling of each element in a set of the elements.
Example:
cy.get('tr.highlight').prev();
b) .prevAll(): .prevAll() can be used to get all previous siblings of each DOM element in a set of matched DOM elements.
Example:
cy.get('.active').prevAll()
.prevUntil(): prevUntil can be used to get all previous siblings of each DOM element in a set of matched DOM elements up to, but not including, the element provided.
Example:
Consider below HTML code:
<ul>
<li id="fruits" class="header">Fruits</li>
<li>apples</li>
<li>oranges</li>
<li>bananas</li>
<li id="veggies" class="header">Vegetables</li>
<li>cucumbers</li>
<li>carrots</li>
<li>corn</li>
<li id="nuts" class="header">Nuts</li>
<li>walnuts</li>
<li>cashews</li>
<li>almonds</li>
</ul>
Then I used cy.get('#nuts').prevUntil('#veggies') it returns all the previous sibling's until #veggies which is
[<li>cucumbers</li>, <li>carrots</li>, <li>corn</li>]
c) .parent(): .parent() is used to get the parent DOM element of a set of DOM elements..parent() only travels a single level up
Example:
cy.get('header').parent()
d) .parents(): .parents is used to get the parent DOM elements of a set of DOM elements..parents() travels multiple levels up the DOM
Example:
Consider we have HTML code like below
<ul class="main-nav">
<li>Overview</li>
<li>
Getting started
<ul class="sub-nav">
<li>Install</li>
<li class="active">Build</li>
<li>Test</li>
</ul>
</li>
</ul>
If we use
cy.get('li.active').parents()
then the output is array of elements which contains [.sub-nav, li, .main-nav]
e) .parentsUntil(): .parentsUntil() is used to get all ancestors of each DOM element in a set of matched DOM elements up to, but not including the specified element
Example:
Consider below HTML
<ul class="nav">
<li>
<a href="#">Clothes</a>
<ul class="menu">
<li>
<a href="/shirts">Shirts</a>
</li>
<li class="active">
<a href="/pants">Pants</a>
</li>
</ul>
</li>
</ul>
If I used cy.get('.active').parentsUntil('.nav') then it return all the parents until .nav. Which will be [ul.menu, li]
f) .next(): .next is used to get the immediately following sibling of each DOM element within a set of DOM elements.
Example:
<ul>
<li>apples</li>
<li class="second">oranges</li>
<li>bananas</li>
</ul>
Consider above HTML Code,
If I use cy.get('.second').next() then it returns bananas
g) .nextAll(): .nextAll can be used to get all following siblings of each DOM element in a set of matched DOM elements.
Example:
<ul>
<li>apples</li>
<li class="second">oranges</li>
<li>bananas</li>
<li>pineapples</li>
<li>grapes</li>
</ul>
The code cy.get('.second').nextAll() will return array of next all siblings which is [<li>bananas</li>, <li>pineapples</li>, <li>grapes</li>]
h) .nextUntil() : .nextUntill() is used to get all following siblings of each DOM element in a set of matched DOM elements up to, but not including, the element provided.
Example:
Consider below HTML code
<ul>
<li id="fruits" class="header">Fruits</li>
<li>apples</li>
<li>oranges</li>
<li>bananas</li>
<li id="veggies" class="header">Vegetables</li>
<li>cucumbers</li>
<li>carrots</li>
<li>corn</li>
<li id="nuts" class="header">Nuts</li>
<li>walnuts</li>
<li>cashews</li>
<li>almonds</li>
</ul>
If we use cy.get('#veggies').nextUntil('#nuts') in our code then it will return array of elements containing next siblings until #veggies which is [<li>cucumbers</li>, <li>carrots</li>, <li>corn</li>]
i) .first(): .first() can be used to get the first match matching DOM element
Example:
Consider below HTML code
<ul>
<li class="one">Knick knack on my thumb</li>
<li class="two">Knick knack on my shoe</li>
<li class="three">Knick knack on my knee</li>
<li class="four">Knick knack on my door</li>
</ul>
If we use cy.get('li').first() in our code it returns first matching element which is
<li class="one">Knick knack on my thumb</li>
j) .last() : The .last() method returns the last matching DOM element
Example:
Consider below HTML code
<ul>
<li class="one">Knick knack on my thumb</li>
<li class="two">Knick knack on my shoe</li>
<li class="three">Knick knack on my knee</li>
<li class="four">Knick knack on my door</li>
</ul>
If we use cy.get('li').last() in our test script then it returns last matching dom element which is
<li class="four">Knick knack on my door</li>
j) .children(): .childeren can be used to get the children of each DOM element within a set of DOM elements.
Example:
Consider below HTML code
<ul class="secondary-nav">
<li class="services-1">Web Design</li>
<li class="services-2">Logo Design</li>
<li class="services-3">
</ul>
In our test script we use cy.get('ul.secondary-nav').children() then it returns all the children of 'ul.secondary-nav' class which is
[
<li class="services-1">Web Design</li>,
<li class="services-2">Logo Design</li>,
<li class="services-3">Print Design</li>
]
l) .root(): root can be used to get the root DOM element
Example: cy.root() returns <html>
m) . siblings (): . siblings() returns all the siblings of specified DOM element
Example:
Consider below HTML code
<ul>
<li>Home</li>
<li>Contact</li>
<li class="active">Services</li>
<li>Price</li>
</ul>
If I use cy.get('.active').siblings() which will return me all siblings of .active class which is ['<li>Price</li>,<li>Home</li><li>Contact</li>]