组合/连接 TestCafe 选择器以供重用答案

【问题标题】：Combine/Concat TestCafe Selector for reuse组合/连接 TestCafe 选择器以供重用
【发布时间】：2020-04-22 11:05:43
【问题描述】：

我使用页面对象模式，通常情况下，我喜欢在另一个选择器中寻址一个元素。所以我只想重用一个已经定义好的 CSS 选择器。我目前的解决方法是定义一个纯字符串。

是否可以这样做：

const list = (listName) => Selector('#list' + listName)
const item = (itemName) => Selector(list, '#item-' + itemName)

获取 Selector 的 CSS-Selector 文本就足够了：

const list = (listName) => Selector('#list' + listName)
const item = (itemName) => Selector(`${list.selectorText} #item-${itemName}`)

或者查找方法支持选择器：

const list = (listName) => Selector('#list' + listName)
const item = (itemName) => list.find(Selector('#item-' + itemName))

【问题讨论】：

【解决方案1】：

是的，你当然可以组合选择器字符串，因为它是一个通用的 css 选择器字符串。

注意：testscafe 测试 API 操作，例如 Click (https://devexpress.github.io/testcafe/documentation/test-api/actions/click.html) 接受字符串作为参数。如果不需要使用 withText、nth 等 Selector 类方法，可以编写如下测试：

const listSelector  = (listName) => `#list${listName}`;

//somewhere in test:
  await t.click(listSelector('My List Name');

【讨论】：