Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you check the equality of the inner text of a element using cypress?

Tags:

cypress

I have a div that has another div inside of it and I want to check the equality of the inner text of the div. I have figured out how to do it using the invoke('text') function, but i am wondering if that is the best way. So my question is: how do you check the equality of the inner text of a element using cypress?

it('the channel name should contain be Anakin Skywaler', () => {   //This works but can we be more specific with our selector   cy.get("[data-test-id='Skywalker,Anakin']").should('contain', 'Skywalker,Anakin'); })  it('the channel name should equal Skywalker,Anakin', () => {   cy.get("[data-test-id='Skywalker,Anakin']").find('.channel-name').invoke('text').then((text) => {     expect(text.trim()).equal('Skywalker,Anakin')   }); }); 

Please ignore the Star War Reference!

like image 503
Maccurt Avatar asked Sep 20 '18 18:09

Maccurt


People also ask

How do you verify text in Cypress?

Cypress can validate the text on an element with the help of jQuery text() method. This method shall help us to fetch the text content on the selected element. We can also put assertions on the text content of the element. cy.

How do I get an element's text contents in Cypress?

How do I get an element's text contents? Cypress commands yield jQuery objects, so you can call methods on them. If the text contains a non-breaking space entity   then use the Unicode character \u00a0 instead of   . Tip: watch the Confirming the text with non breaking space entity video.

How do you check the visibility of an element in Cypress?

The only way for you to "see" and debug why Cypress thought an element was not visible is to use a debugger statement. We recommend placing debugger or using the . debug() command directly BEFORE the action.


2 Answers

I think you can simplify this.

Assuming you have HTML that looks like this:

<div data-test-id="Skywalker,Anakin">   <div class=".channel-name">Skywalker,Anakin</div> </div> 

You can write your assert like this:

cy.get('[data-test-id="Skywalker,Anakin"]').should(   "have.text",   "Skywalker,Anakin" ); 

This passed for me and if I modified the HTML to Skywalker,Anakin 1 it failed as you would expect. Cypress uses the have.text to look at what is rendered out so it will not worry about any markup and just see what the result is.

This did not work for trimming. you would need to add a callback to do the trimming.

cy.get('[data-test-id="Skywalker,Anakin"]').should(($div) => {   expect($div.text().trim()).equal("Skywalker,Anakin"); }); 
like image 71
TDDdev Avatar answered Nov 04 '22 06:11

TDDdev


You can check if a string is contained somewhere inside the div:

cy.get("[data-test-id='Skywalker,Anakin']").contains('Skywalker,Anakin'); 

Or, if you need to make sure the div contains only the specified text and nothing else, you can tag on this extra assertion:

cy.get("[data-test-id='Skywalker,Anakin']").contains('Skywalker,Anakin').should((elem) => {     expect(elem.text()).to.equal('Skywalker,Anakin'); }); 

Explanation:

// Get the data cy.get("[data-test-id='Skywalker,Anakin']")          // Get the child or children of the previous command that         // contain the text - this command fails if no child         // element is found containing the given text         .contains('Skywalker,Anakin'); 
// These two lines are explained above cy.get("[data-test-id='Skywalker,Anakin']")         .contains('Skywalker,Anakin')          // Like a .then(), except the contents are retried until         // all contained assertions are successful or until the         // command times out         .should((elem) => {              // Expect the element's text to exactly equal the             // string, not just contain it             expect(elem.text()).to.equal('Skywalker,Anakin');         }); 
like image 20
Joshua Wade Avatar answered Nov 04 '22 06:11

Joshua Wade