Cypress+TS:从HTMLelement获取文本
Cypress+TS: Get text from HTMLelement
我正在与:
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++;
}
});
});
})
问题:
在这种情况下如何获得 HTML 元素文本?
或者我可能会在这方面习惯于困难的逻辑?如果是,请给我一个想法,如何更好地解决它。
我不确定你在问什么,但如果你只想获取元素的文本,你可以这样做。
cy.get("Your Selector").invoke('text').then((text) => {
expect(text.trim()).equal('what ever your text is');
});
如果我理解有误,请评论,我会尽力解答。
我认为基本问题是 .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
。
要获取实际的字符串对象而不是 JQuery 对象,您可以使用:
cy.get(myElement).then((theElement) => {
theElement.text() // this returns a string with the element's InnerHTML
});
我正在与:
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++;
}
});
});
})
问题: 在这种情况下如何获得 HTML 元素文本? 或者我可能会在这方面习惯于困难的逻辑?如果是,请给我一个想法,如何更好地解决它。
我不确定你在问什么,但如果你只想获取元素的文本,你可以这样做。
cy.get("Your Selector").invoke('text').then((text) => {
expect(text.trim()).equal('what ever your text is');
});
如果我理解有误,请评论,我会尽力解答。
我认为基本问题是 .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
。
要获取实际的字符串对象而不是 JQuery 对象,您可以使用:
cy.get(myElement).then((theElement) => {
theElement.text() // this returns a string with the element's InnerHTML
});