如何使用TestCafe单击父类中的元素？答案

【问题标题】：How to click element in parent class using TestCafe?如何使用TestCafe单击父类中的元素？
【发布时间】：2020-07-05 16:04:35
【问题描述】：

我想在 textarea 上输入带有父类的文本，该父类在以下 img Snippet 代码上标记我想使用那个类，因为 textarea 上的 id 是动态元素，每次加载都会改变。这就是我使用父类的原因。我用

let textArea = Selector('.block-card list-group-item text-card col-xs-12').find('textarea')

await t
    .typeText(textArea, 'Hai...')

但出现错误：

The specified selector does not match any element in the DOM tree.

> | Selector('.block-card list-group-item text-card col-xs-12')
  |   .find('textarea')

这是用户界面用户界面。谁能帮帮我？

【问题讨论】：

标签： testing automated-tests e2e-testing testcafe browser-automation

【解决方案1】：

我会使用 Xpath。类似：//div[@class="block-card list-group-item text-card col-xs-12"]//textarea

【讨论】：

我用 //div[@class="block-card list-group-item text-card col-xs-12"]//textarea 还是一样，又报错：An error occurred in选择器代码：SyntaxError: 无法在 'Document' 上执行 'querySelectorAll'：'//div[@class="hwt-backdrop"]//textarea' 不是有效的选择器。
我使用另一个 xpath，得到错误：匹配指定选择器的元素不可见。如果我使用完整的 Xpath 是否正确？

【解决方案2】：

这可能有效

let textArea = Selector('.hwt-container').find('textarea').withAttribute('class','text-card-text')

【讨论】：

我收到错误：指定的选择器与 DOM 树中的任何元素都不匹配。 |选择器('.hwt-backdrop') > | .find('textarea') | .withAttribute('class', 'text-card-text')。我编辑了上面的 sn-p 代码，textarea 不在 .hwt-backdrop 内，这就是为什么我想在 sn-p 代码上使用类（在矩形 1 上）
如果它在 hwt-container 下，这可能有效 Selector('.hwt-container').find('textarea').withAttribute('class','text-card-text')
如果没有任何效果，请尝试 Selector('.block-card').find('.list-group-item .form-group').find('div').find('. hwt-container').find('textarea')
当我使用 Selector('.hwt-container').find('textarea').withAttribute('class','text-card-text') 时，出现错误：指定的选择器不匹配 DOM 树中的任何元素。我使用 Selector('.block-card').find('.list-group-item .form-group').find('div').find('.hwt-container').find('textarea ')，出现错误：与指定选择器匹配的元素不可见。
我认为你使用的父 div 也是动态的。试试 Selector('.list-group').find('.block-card').find('.list-group-item .form-group').find('div').find('.hwt-container').find('textarea') 如果这也失败了，请在此处发布您的 UI 场景