Cypress + TS: получить текст из HTML-элемента - PullRequest
Новая
       32

Cypress + TS: получить текст из HTML-элемента

0 голосов
/ 23 октября 2018

Я работаю с:

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 в этой ситуации?Или я мог бы использовать сложную логику в этом?Если да, пожалуйста, дайте мне идею, как это можно решить лучше.

Ответы [ 3 ]

0 голосов
/ 23 октября 2018

Я думаю, что основная проблема в том, что .each() повторяет список найденных элементов, поэтому внутри функции each() вы получаете только один элемент за раз, но внутренний код использует .get(), как если бы elem быломассив элементов.

Возможно, вам будет проще использовать .then(elems => {...}).

. Я использую отображение массива, чтобы получить массив текстовых значений с использованием нативного textContent (ref 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 внутри него.

0 голосов
/ 05 сентября 2019

Чтобы получить фактический строковый объект, а не объект JQuery, вы можете использовать: 

cy.get(myElement).then((theElement) => {
  theElement.text() // this returns a string with the element's InnerHTML
});
0 голосов
/ 23 октября 2018

Я не уверен, что вы спрашиваете, но если вы просто хотите получить текст элемента, вы можете сделать это.

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

Если я неправильно понял, пожалуйста, прокомментируйте, и я сделаю все возможное, чтобы ответить на него.

...