找不到依赖于testcafe页面对象模型中其他元素的元素

如何解决找不到依赖于testcafe页面对象模型中其他元素的元素

根据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"]');
}