问题描述
根据POM中的父代来实现定位器查找方法时遇到问题
DOM的示例(大致):
<div class="lessons">
<div [data-test="lesson"]>
<div class="lesson__info">
<div ...>
<h2 [data-test="lessonTitle"]>FirstLesson</h2>
<div class"lesson__data">
<div [data-test="lessonDataButton"]>
<div class"lesson__controls">
<div [data-test="lessonStartButton"]>
<div [data-test="lesson"]>
<div class="lesson__info">
<div ...>
<h2 [data-test="lessonTitle"]>SecondLesson</h2>
<div class"lesson__data">
<div [data-test="lessonDataButton"]>
<div class"lesson__controls">
<div [data-test="lessonStartButton"]>
我的POM示例:
import { Selector,t } from 'testcafe'
class Page {
constructor() {
this.lesson = Selector('[data-test="lesson"]')
this.lessonDataBtn = Selector('[data-test="lessonDataButton"]')
this.lessonStartBtn = Selector('[data-test="lessonStartButton"]')
this.lessonTitle = Selector('[data-test="lessonTitle"]')
}
async getLessonButton(title,lessonButton) {
const titleLocator = this.lessonTitle.withText(title);
const currentLesson = this.lesson.filter((node) => {
return node.contains(titleLocator())
},{ titleLocator });
const buttonSelector = currentLesson.find((node) => {
return node === lessonButton();
},{ lessonButton });
return buttonSelector;
}
在测试中,我试图单击按其“标题”过滤的特定课程中的“ lessonDataButton”:
await t.click(await schedule.getLessonButton(testData.lesson.data.title,page.lessonDataBtn))
它仅对第一次出现在页面上的“ lessonDataBtn”有效,但是,如果我尝试在第二堂课中找到相同的按钮,则会出现错误:
The specified selector does not match any element in the DOM tree.
> | Selector('[data-test="lesson"]')
| .filter([function])
| .find([function])
解决方法
我使用您提供的代码示例创建了一个示例,但出现了另一个错误:
1. The specified selector does not match any element in the DOM tree.
| Selector('[data-test="lesson"]')
| .filter([function])
> | .find([function])
但是我认为情况是一样的:lessonButton()
选择器的find
方法的过滤器函数中的currentLesson
调用将始终返回集合的第一个节点。一个简单的解决方案是使用css选择器直接搜索按钮:const buttonSelector = currentLesson.find('[data-test="lessonDataButton"]');
。您还可以完全摆脱过滤器功能:
getLessonButton (title) {
return this.lessonTitle.withText(title)
.parent('[data-test="lesson"]')
.find('[data-test="lessonDataButton"]');
}