option.timeout 忽略等待 Selector.withAttribute

Question

我已经尝试过各种方法，但我无法让 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，把selector直接放在expect里面，不管有没有await，把这个await block from the previous one or add it to the previous chain, TestCafe immediately throws an error at期待（activeStartButton）.notOk`

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

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

Answer 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

Answer 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 中，您应该仅针对属性或选择器的方法断言 returns 使用 ok() 或 notOk() 时的布尔值。

可能的布尔属性是：

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

可能的方法是：

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

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

所以当你写的时候:

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

option.timeout 忽略等待 Selector.withAttribute

option.timeout ignored waiting for Selector.withAttribute

automated-tests

timeout

e2e-testing

web-testing

testcafe