CODEWITHSUNDEEP
typescriptgetbrowser-automationcypress
Vilius
Vilius

Reputation: 91

Cypress+TS: Get text from HTMLelement

I am working with:

Cypress.io and TypeScript.

I faced logical issue.

What I want to do:

There are list of elements in few pages. I want to take that list of elements and check if they have some kind of name and if one of these have that name, open it. I have faced with such problem, that I cannot take text from HTML element. This is my code:

it.only('should be able to open element', function () {
 cy.get('.page-number').each(function () { // Using this to get all pages 
    cy.get('div[class="name"] > a > u').then(elem => { //Here I get elements with job names
      console.log('1 ', elem.get(0)); //RESULT: only that one element name. Example:<u _ngcontent-c10="">Element 1</u>
      console.log('2 ', elem.text()); //RESULT: all elements in a page as text
      const textElem = elem.get(1); 
      let txt = +textElem;
      console.log('3 ', textElem); //RESULT: tried to convert it like this. Example:<u _ngcontent-c10="">Element 1</u>
      console.log('4 ', elem.get(0).text()); //RESULT: Error Message: TS2339: Property 'text' does not exist on type 'HTMLElement'.
      let i = 0;
      const jobName = elem.get(i);
      console.log('3 ', elem.get(i));
    if({HERE I WANT TO GET ELEMENT TEXT} === 'My text'){
      //TODO
     }
       else{
          if(expect(i).to.be.oneOf([8, 16, 24])){ //one page have 8 elements
          cy.get('.page-number').click({multiple : true}); //one another page with elements
          cy.log('ELEMENT WAS NOT FIND IN PAGE.');
          }
         i++;
       }
    });
  });
})

Question: How I can get HTMLelement text in this situation? Or I might use to difficult logic in this? If yes, please give me an idea, how it can be solved better.

Upvotes: 2

Views: 9138

Answers (3)

emery
emery

Reputation: 9723

To get an actual string object and not a JQuery object, you can use:

cy.get(myElement).then((theElement) => {
  theElement.text() // this returns a string with the element's InnerHTML
});

Upvotes: 2

Richard Matsen
Richard Matsen

Reputation: 23533

I think the basic problem is that .each() iterates the list of found elements, so inside the each() function you only get one element at a time, but the inner code uses .get() as if elem is an array of elements.

You may find it easier to use .then(elems => {...}).

I use array mapping to get an array of the text values using native textContent (ref Node.textContent) and the spread operator to convert the result of cy.get() to an array that works with .map().

it('should...', () => {
  ...
  cy.get('div[class="name"] > a > u').then(elems => {

    const texts = [...elems].map(el => el.textContent.trim());
    let i = 0;
    if (texts[i] === 'My text') {
      ...
    }
    else {
      ...
    }
});

Also if(expect(i).to.be.oneOf([8, 16, 24])) is probably not a good idea because expect has side effects. I would use a simple boolean expression for example if([8, 16, 24].includes(i)) and expect inside it.

Upvotes: 2

Maccurt
Maccurt

Reputation: 13817

I am not sure what you are asking but if you just want to get the text of an element you can do this. 

cy.get("Your Selector").invoke('text').then((text) => {
         expect(text.trim()).equal('what ever your text is');
  });

If I misunderstood, please comment and I will do my best to answer it.

Upvotes: 1

Related Questions