<\/div>\n

<\/div>\n<\/div>\n

<\/div>\n

Table of Contents<\/div>\n<\/p><\/div>\n<\/div>\n<\/div>\n

<\/div>\n

1. How can I get the Text content in cypress?<\/a><\/div>\n

2. What is cy.contains command?<\/a><\/div>\n

3. How can we use browser Navigation in Cypress?<\/a><\/div>\n

4. How can I wait for element to be visible in Cypress?<\/a><\/div>\n

5. How can I click hidden element?<\/a><\/div>\n

6. How can I get the browser Properties in Cypress?<\/a><\/div>\n

7. List of some cypress function which will be useful for traversing DOM?<\/a><\/div>\n<\/div>\n

<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

1. How can I get the Text content in cypress?<\/a><\/h3>\n
Cypress doesn\u2019t provide get text method on element using jQuery Native DOM method we can get the text like below<\/p>\n
\n

\n<\/ins>\n<\/div>\n
Option 1:<\/strong> Get the text using jQuery method<\/p>\n
Option 2:<\/strong> Assert directly using should and have.text<\/p>\n
Option 3:<\/strong> Use invoke function to get the text<\/p>\n
<\/strong><\/p>\n
Option1: <\/strong>Get the text using JQuery method<\/p>\n
Example:<\/em><\/strong><\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
cy.get(‘#customers’).then(($ele)=>{<\/p>\n
cy.log($ele.text()); \/\/logs the text<\/p>\n
})\u00a0<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
Option 2: If we want to verify text we can directly use it, we don\u2019t have to use above method<\/strong><\/p>\n
Example:<\/em><\/strong><\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
cy.get(‘div’).should(‘have.text’, ‘foobarbaz’)<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
Option 3: we can use invoke function to get the text<\/strong><\/p>\n
Example:<\/em><\/strong><\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
cy.log(“******”+text); \/\/logs the text<\/p>\n
});<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
2. What is cy.contains command?<\/a><\/h3>\n
cy.contains()<\/strong> command can be used to find the element by using their contents<\/p>\n
Example:<\/strong><\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
cy.contains(‘Hello’)<\/p>\n
\/\/This returns the first matching element which is<\/p>\n
having text hello<\/p>\n
cy.get(‘.button’).contains(‘Clickme’)<\/p>\n
\/\/This returns element with .button class having text Click me<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
3. How can we use browser Navigation in Cypress?<\/a><\/h3>\n
Cypress provides a way to navigate back and forward in browser<\/p>\n
cy.go()<\/strong> function can be used for this purpose<\/p>\n
cy.go(‘back’)<\/strong>
\nor<\/u>
\ncy.go(-1)<\/strong>\u00a0 is used to navigate to previous browser history<\/p>\n
cy.go(‘forward’)<\/strong>\u00a0 or<\/u>
\ncy.go(1)<\/strong> is used to go forward in browser history<\/p>\n
Example:<\/strong><\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
cy.go(‘back’)<\/p>\n
cy.location(‘pathname’).should(‘not.include’, ‘navigation’)<\/p>\n
cy.go(‘forward’)<\/p>\n
cy.location(‘pathname’).should(‘include’, ‘navigation’)<\/p>\n
\/\/ clicking back<\/p>\n
cy.go(-1)<\/p>\n
cy.location(‘pathname’).should(‘not.include’, ‘navigation’)<\/p>\n
\/\/ clicking forward<\/p>\n
cy.go(1)<\/p>\n
cy.location(‘pathname’).should(‘include’, ‘navigation’)<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
4. How can I wait for element to be visible in Cypress?<\/a><\/h3>\n
Cypress internally wait for element before performing any action. However we can use the below code as a workaround whenever necessary<\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
cy.get(‘.somelement’, { timeout: 10000 }).should(‘be.visible’);<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
5. How can I click hidden element?<\/a><\/h3>\n
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}<\/strong><\/em> option<\/p>\n
Example:<\/strong><\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
cy.get(‘.checkbox’).check({ force: true })<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
6. How can I get the browser Properties in Cypress?<\/a><\/h3>\n
Cypress.browser<\/strong> gives the all browser properties such as name, path, headless, channel etc.<\/p>\n
Example:<\/strong><\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
let browserName = cypress.browser.name<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
7. List of some cypress function which will be useful for traversing DOM?<\/a><\/h3>\n
Note: Any one can be asked to explain or some of them will be asked in Interview<\/strong><\/p>\n
Cypress framework by default provides many traversal functions<\/p>\n
.prev():<\/strong> .prev() <\/strong>is used to \u00a0get the immediately preceding sibling of each element in a set of the elements.<\/p>\n
Example:<\/strong><\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
cy.get(‘tr.highlight’).prev();<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
b) .prevAll()<\/strong>: .prevAll()<\/strong> can be used to get all previous siblings of each DOM element in a set of matched DOM elements.<\/p>\n
Example:<\/strong><\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
cy.get(‘.active’).prevAll()<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
.prevUntil():<\/strong> 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.<\/p>\n
Example:<\/strong><\/p>\n
Consider below HTML code:<\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
<ul><\/p>\n
\u00a0 <li id=”fruits” class=”header”>Fruits<\/li><\/p>\n
\u00a0 <li>apples<\/li><\/p>\n
\u00a0 <li>oranges<\/li><\/p>\n
\u00a0 <li>bananas<\/li><\/p>\n
\u00a0 <li id=”veggies” class=”header”>Vegetables<\/li><\/p>\n
\u00a0 <li>cucumbers<\/li><\/p>\n
\u00a0 <li>carrots<\/li><\/p>\n
\u00a0 <li>corn<\/li><\/p>\n
\u00a0 <li id=”nuts” class=”header”>Nuts<\/li><\/p>\n
\u00a0 <li>walnuts<\/li><\/p>\n
\u00a0 <li>cashews<\/li><\/p>\n
\u00a0 <li>almonds<\/li><\/p>\n
<\/ul><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
Then I used cy.get(‘#nuts’).prevUntil(‘#veggies’) it returns all the previous sibling’s until #veggies <\/strong>which is <\/strong>\u00a0<\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
[<li>cucumbers<\/li>, <li>carrots<\/li>, <li>corn<\/li>]<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
c) .parent():\u00a0<\/strong>.parent() is used to get the parent DOM element of a set of DOM elements..parent() only travels a single level up<\/p>\n
Example:<\/strong><\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
cy.get(‘header’).parent()<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
d) .parents()<\/strong>: .parents is used to get the parent DOM elements of a set of DOM elements..parents() travels multiple levels up the DOM<\/p>\n
Example:<\/strong><\/p>\n
Consider we have HTML code like below<\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
<ul class=”main-nav”><\/p>\n
\u00a0 <li>Overview<\/li><\/p>\n
\u00a0 <li><\/p>\n
\u00a0\u00a0\u00a0 Getting started<\/p>\n
\u00a0\u00a0\u00a0 <ul class=”sub-nav”><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 <li>Install<\/li><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 <li class=”active”>Build<\/li><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 <li>Test<\/li><\/p>\n
\u00a0\u00a0\u00a0 <\/ul><\/p>\n
\u00a0 <\/li><\/p>\n
<\/ul><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
If we use<\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
cy.get(‘li.active’).parents()<\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
then the output is array of elements which contains [.sub-nav, li, .main-nav]<\/strong><\/p>\n
e) .parentsUntil()<\/strong>: .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<\/p>\n
Example: <\/strong><\/p>\n
Consider below HTML<\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
<ul class=”nav”><\/p>\n
\u00a0 <li><\/p>\n
\u00a0\u00a0\u00a0 <a href=”#”>Clothes<\/a><\/p>\n
\u00a0\u00a0\u00a0 <ul class=”menu”><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 <li><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a href=”\/shirts”>Shirts<\/a><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 <\/li><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 <li class=”active”><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a href=”\/pants”>Pants<\/a><\/p>\n
\u00a0\u00a0\u00a0\u00a0\u00a0 <\/li><\/p>\n
\u00a0\u00a0\u00a0 <\/ul><\/p>\n
\u00a0 <\/li><\/p>\n
<\/ul><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
If I used \u00a0cy.get(‘.active’).parentsUntil(‘.nav’)<\/strong><\/em> \u00a0then it return all the parents until .nav. <\/strong>Which will be [ul.menu, li]<\/p>\n
f) .next():<\/strong> .next is used to get the immediately following sibling of each DOM element within a set of DOM elements.<\/p>\n
Example: <\/strong><\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
<ul><\/p>\n
\u00a0 <li>apples<\/li><\/p>\n
\u00a0 <li class=”second”>oranges<\/li><\/p>\n
\u00a0 <li>bananas<\/li><\/p>\n
<\/ul><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
Consider above HTML Code,<\/p>\n
If I use cy.get(‘.second’).next()<\/strong><\/em> then it returns bananas<\/strong><\/strong>
<\/strong>
g) .nextAll():<\/strong> .nextAll can be used to get all following siblings of each DOM element in a set of matched DOM elements.<\/p>\n
Example:<\/strong><\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
<ul><\/p>\n
\u00a0 <li>apples<\/li><\/p>\n
\u00a0 <li class=”second”>oranges<\/li><\/p>\n
\u00a0 <li>bananas<\/li><\/p>\n
\u00a0 <li>pineapples<\/li><\/p>\n
\u00a0 <li>grapes<\/li><\/p>\n
<\/ul><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
The code cy.get(‘.second’).nextAll() <\/strong><\/em>will return array of next all siblings which is [<li>bananas<\/li>, <li>pineapples<\/li>, <li>grapes<\/li>]<\/p>\n
h) .nextUntil()<\/strong> : .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.<\/p>\n
Example: <\/strong><\/p>\n
Consider below HTML code<\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
<ul><\/p>\n
\u00a0 <li id=”fruits” class=”header”>Fruits<\/li><\/p>\n
\u00a0 <li>apples<\/li><\/p>\n
\u00a0 <li>oranges<\/li><\/p>\n
\u00a0 <li>bananas<\/li><\/p>\n
\u00a0 <li id=”veggies” class=”header”>Vegetables<\/li><\/p>\n
\u00a0 <li>cucumbers<\/li><\/p>\n
\u00a0 <li>carrots<\/li><\/p>\n
\u00a0 <li>corn<\/li><\/p>\n
\u00a0 <li id=”nuts” class=”header”>Nuts<\/li><\/p>\n
\u00a0 <li>walnuts<\/li><\/p>\n
\u00a0 <li>cashews<\/li><\/p>\n
\u00a0 <li>almonds<\/li><\/p>\n
<\/ul><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
If we use cy.get(‘#veggies’).nextUntil(‘#nuts’)<\/strong><\/em> in our code then it will return array of elements containing next siblings until #veggies <\/strong>which is [<li>cucumbers<\/li>, <li>carrots<\/li>, <li>corn<\/li>]<\/p>\n
i) <\/strong>.first(): <\/strong>.first() can be used to get the first match matching DOM element<\/p>\n
Example: <\/strong><\/p>\n
Consider below HTML code<\/p>\n<\/div>\n
\n
<\/div>\n
\n
\n
<ul><\/p>\n
\u00a0 <li class=”one”>Knick knack on my thumb<\/li><\/p>\n
\u00a0 <li class=”two”>Knick knack on my shoe<\/li><\/p>\n
\u00a0 <li class=”three”>Knick knack on my knee<\/li><\/p>\n
\u00a0 <li class=”four”>Knick knack on my door<\/li><\/p>\n
<\/ul><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
`If we use <\/code>cy.get(‘li’).first()<\/strong><\/em> in our code it returns first matching element which is <\/code><\/p>\n<\/div>\n`
\n<\/div>\n\n\n<li class=”one”>Knick knack on my thumb<\/li><\/p>\n<\/div>\n<\/div>\n<\/div>\n \nj) .last() :\u00a0<\/strong>The .last() method returns the last matching DOM element Example: Consider below HTML code<\/strong><\/p>\n<\/div>\n \n<\/div>\n\n\n<ul><\/p>\n \u00a0 <li class=”one”>Knick knack on my thumb<\/li><\/p>\n \u00a0 <li class=”two”>Knick knack on my shoe<\/li><\/p>\n \u00a0 <li class=”three”>Knick knack on my knee<\/li><\/p>\n \u00a0 <li class=”four”>Knick knack on my door<\/li><\/p>\n <\/ul><\/p>\n<\/div>\n<\/div>\n<\/div>\n \nIf we use cy.get(‘li’).last() in our test script then it returns last matching dom element which is<\/p>\n<\/div>\n \n<\/div>\n\n\n<li class=”four”>Knick knack on my door<\/li><\/p>\n<\/div>\n<\/div>\n<\/div>\n \nj) .children():<\/strong> .childeren can be used to get the children of each DOM element within a set of DOM elements.<\/p>\n Example: <\/strong><\/p>\n Consider below HTML code<\/p>\n<\/div>\n \n<\/div>\n\n\n<ul class=”secondary-nav”><\/p>\n \u00a0\u00a0\u00a0\u00a0\u00a0 <li class=”services-1″>Web Design<\/li><\/p>\n \u00a0\u00a0\u00a0\u00a0\u00a0 <li class=”services-2″>Logo Design<\/li><\/p>\n \u00a0\u00a0\u00a0\u00a0\u00a0 <li class=”services-3″><\/p>\n <\/ul><\/p>\n<\/div>\n<\/div>\n<\/div>\n \nIn our test script we use cy.get(‘ul.secondary-nav’).children()<\/strong><\/em> then it returns all the children of ‘ul.secondary-nav’<\/strong><\/em> class which is<\/p>\n<\/div>\n \n<\/div>\n\n\n[<\/p>\n <li class=”services-1″>Web Design<\/li>,<\/p>\n <li class=”services-2″>Logo Design<\/li>,<\/p>\n <li class=”services-3″>Print Design<\/li><\/p>\n ]<\/p>\n<\/div>\n<\/div>\n<\/div>\n \nl) .root():<\/strong> root can be used to get the root DOM element<\/p>\n Example: cy.root() returns <html><\/strong><\/p>\n m) . siblings ():<\/strong> . siblings() returns all the siblings of specified DOM element<\/p>\n Example:<\/strong><\/p>\n Consider below HTML code<\/p>\n<\/div>\n \n<\/div>\n\n\n<ul><\/p>\n \u00a0 <li>Home<\/li><\/p>\n \u00a0 <li>Contact<\/li><\/p>\n \u00a0 <li class=”active”>Services<\/li><\/p>\n \u00a0 <li>Price<\/li><\/p>\n <\/ul><\/p>\n<\/div>\n<\/div>\n<\/div>\n \nIf I use cy.get(‘.active’).siblings()<\/strong><\/em> which will return me all siblings of .active<\/strong> class which is [‘<li>Price<\/li>,<li>Home<\/li><li>Contact<\/li>]<\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n <\/div>\n<\/section>\n<\/body><\/html><\/p>\n","protected":false},"excerpt":{"rendered":" Table of Contents 1. How can I get the Text content in cypress? 2. What is cy.contains command? 3. How can we use browser Navigation in Cypress? 4. How can I wait for element to be visible in Cypress? 5. How can I click hidden element? 6. How can I get the browser Properties in […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,4],"tags":[],"class_list":["post-1042","post","type-post","status-publish","format-standard","hentry","category-cypress","category-interview-questions","post-wrapper","thrv_wrapper"],"_links":{"self":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1042","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=1042"}],"version-history":[{"count":0,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/1042\/revisions"}],"wp:attachment":[{"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=1042"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=1042"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rahulshettyacademy.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=1042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

6. How can I get the browser Properties in Cypress?<\/a><\/h3>\nCypress.browser<\/strong> gives the all browser properties such as name, path, headless, channel etc.<\/p>\nExample:<\/strong><\/p>\n<\/div>\n\n<\/div>\n\n\nlet browserName = cypress.browser.name<\/p>\n<\/div>\n<\/div>\n<\/div>\n