Testing 在testcafe页面对象模型中很难找到依赖于其他元素的元素

在POM中根据其父对象实现定位器查找方法时遇到问题

DOM示例（大致如下）：

在我的测试中，我试图单击特定课程中的“lessonDataButton”，并按其“标题”进行过滤：

它仅适用于第页上第一次出现的“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])

但我相信情况是一样的：在

currentLesson

选择器的

find

方法的filter函数中调用

lessonButton（）

将始终返回集合的第一个节点。一个简单的解决方案是直接使用css选择器搜索按钮：

const buttonSelector=currentLesson.find（“[data test=“lessonDataButton”]”）。您还可以完全取消筛选函数：

getLessonButton (title) {
    return this.lessonTitle.withText(title)
        .parent('[data-test="lesson"]')
        .find('[data-test="lessonDataButton"]');
}

是的，你的思想是一种退路。filter（）选项对我来说更合适，因为课程（[data test=“lesson”]）有不同的按钮（4-5个按钮，取决于课程的状态），我希望在不更改当前页面模型的情况下将它们作为选择器（）传递。
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])

getLessonButton (title) {
    return this.lessonTitle.withText(title)
        .parent('[data-test="lesson"]')
        .find('[data-test="lessonDataButton"]');
}