Cypress+TS：从 HTMLelement 获取文本

Question

我正在与：

Cypress.io 和 TypeScript。

我遇到了逻辑问题。

我想要做什么：

在几页中有元素列表。我想获取该元素列表并检查它们是否具有某种名称，如果其中一个具有该名称，请打开它。 我遇到了这样的问题，我无法从 HTML 元素中获取文本。这是我的代码：

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++;
       }
    });
  });
})

问题： 在这种情况下如何获取 HTMLelement 文本？ 或者我可能会在这方面习惯于困难的逻辑？如果是，请给我一个想法，如何更好地解决它。

Answer 1

要获取实际的字符串对象而不是 JQuery 对象，您可以使用：

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

Answer 2

我认为基本问题是.each() 迭代找到的元素列表，所以在each() 函数内你一次只能得到一个元素，但内部代码使用.get() 好像elem 是一个元素数组。

您可能会发现使用.then(elems => {...}) 会更容易。

我使用数组映射来获取文本值数组，使用原生 textContent（参考 Node.textContent）和扩展运算符将 cy.get() 的结果转换为与 .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 {
      ...
    }
});

另外if(expect(i).to.be.oneOf([8, 16, 24])) 可能不是一个好主意，因为expect 有副作用。我会在其中使用一个简单的布尔表达式，例如 if([8, 16, 24].includes(i)) 和 expect。

Answer 3

我不确定你在问什么，但如果你只是想获取元素的文本，你可以这样做。

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

如果我理解有误，请评论，我会尽力解答。