option.timeout 忽略等待 Selector.withAttribute答案

【问题标题】：option.timeout ignored waiting for Selector.withAttributeoption.timeout 忽略等待 Selector.withAttribute
【发布时间】：2018-12-06 18:04:27
【问题描述】：

我已经尝试了各种方法，但我无法让 TestCafe 等待从元素中删除 disabled 属性。

这显然会阻止所有进一步的测试，因为我需要按钮可以点击才能继续流程。

fixture('create').page('locahost:3000');

test('one', async  => {
  const myIframe = Selector('#myIframe');

  await t
    .typeText('#input', 'words')
    .click('#update')
    .expect(myIframe.exists).ok('', { timeout: 10000 })
    .switchToIframe(myIframe)

  const activeStartButton = await Selector('#start').withAttribute('disabled');

  await t
    .expect(activeStartButton).notOk('', { timeout: 60000, allowUnawaitedPromise: true });
});

不管我是提前定义了activeStartButton，还是在定义中添加或删除了await，直接把选择器放在expect里面有没有await，把这个await block from the previous one or add it to the previous chain, TestCafe immediately throws an error atexpect(activeStartButton).notOk分开`

错误因我的方法而异，但对于此代码：

AssertionError: start button remains disabled: expected [Function: __$$clientFunction$$] to be falsy"

【问题讨论】：

标签： automated-tests timeout e2e-testing web-testing testcafe

【解决方案1】：

您的代码应如下所示：

const selector = Selector('#start')
    .with({visibilityCheck: true});

await t
    .expect(selector.exists).ok({timeout: 10000}) // ensure the button is visible on the screen
    .hover(selector) // access to the button via the mouse
    .expect(selector.hasAttribute("disabled")).notOk({timeout: 10000}) // ensure the field is enabled
    .click(selector);

也许你也应该看看say goodbye to flakyness

【讨论】：

值得注意的是，我遇到的问题之一是 .hasAttribute 没有记录在 TestCafe 上。它被列为.withAttribute，会引发上述错误。

【解决方案2】：

这段代码：

const mySelector = Selector('any css selector');
await t
    .expect(mySelector).notOk()

总是会抛出一个错误，因为mySelector 的真实性总是真实的。所以上面的代码和这段代码类似： assert(true).toBe(false).

mySelector以上是一个promise对象，并且promise的真实性总是真实的。

现在如果你写：

const mySelector = await Selector('any css selector');
await t
    .expect(mySelector).notOk();

mySelector 是一个 NodeSnaphsot 对象，它是某种文字对象，上面有很多属性，例如：

{
    textContent,
    attributes,
    id,
    clientHeight,
    ...
}

文字对象的真实性总是真实的，因此上述 expect 仍然会抛出错误。

事实上，如果测试代码改为：

const mySelector = await Selector('any css selector');
await t
    .expect(mySelector).ok();

即使mySelector 不代表 DOM 中的任何现有元素，上述测试代码也将始终通过。

在 expect 中，你应该只为使用 ok() 或 notOk() 时返回布尔值的 Selector 的属性或方法断言。

可能的布尔属性有：

mySelector.hasChildElements
mySelector.hasChildNodes
mySelector.checked
mySelector.focused
mySelector.selected
mySelector.visible
mySelector.exists

可能的方法有：

mySelector.hasClass('className')
mySelector.hasAttribute('attributeName')

`.withAttribute('attributeName') 只是一个过滤器方法，它返回一个 Selector 对象（即一个 Promise），这个结果的真实性始终为 true。

所以当你写作时：

const mySelector = Selector('any css selector').withAttribute('attributeName');

这或多或少有点像写这个伪代码：

const mySelector = Selector('any css selector') // returns a collection of Selectors
    .toArray() // convert it to an array
    .filter((selector) => selector.hasAttribute('attributeName'))
    .toPromise() // convert back to a promise object

【讨论】：