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>]


Tags


You may also like

API Basics and Architecture

API Basics and Architecture
Leave a Reply

Your email address will not be published. Required fields are marked

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}