testcafe如何选择条件元素

Question

我无法选择有条件地出现在页面上的元素。我试过 awaiting 但没用。

// Gets imported as detailedProductPage 
export default class Page {
  constructor () {
    this.chipItem0 = Selector('[data-test-id="chipItem0"]').child('.tag-name').child('[data-test-id="tagValue"]');
  }
}


test('should accept value and allow for making the selection of multiple     items.', async t => {
  const string0 = 'Professionelle Nassreinigung nicht erlaubt';
  const string1 = 'Handwäsche';
  const string2 = 'Waschen 30°C';

  await t
    .click(detailedProductPage.listContainerFirstChild)

    .typeText(detailedProductPage.symbols, string0)
    .click(detailedProductPage.symbolsResultsItem0)
    .expect(string0).eql(detailedProductPage.chipItem0.innerText)

    .typeText(detailedProductPage.symbols, string1)
    .click(detailedProductPage.symbolsResultsItem0)
    .expect(string1).eql(detailedProductPage.chipItem1.innerText)

    .typeText(detailedProductPage.symbols, string2)
    .click(detailedProductPage.symbolsResultsItem1)
    .expect(string2).eql(detailedProductPage.chipItem2.innerText);
});

Answer 1

您可以使用 exists 属性来检查页面上是否存在该元素。有了这个，您可以单击有条件地出现在页面上的元素：

const el = Selector('#el');

if(await el.exists)
    await t.click(el);

为了让你的测试正确，你需要修正你的断言。根据 TestCafe Assertions API，eql 断言应按以下方式使用：

await t.expect( actual ).eql( expected, message, options );

TestCafe 允许用户将异步选择器属性作为 actual 参数传递。这些属性表示测试页面上相关 DOM 元素的状态。在您的情况下，实际值为 detailedProductPage.chipItem0.innerText。 expected 值不能是异步的属性，它应该是计算值（如字符串、布尔值、数字或某些对象等）。以下代码应该可以正常工作：

await t
    .click(detailedProductPage.listContainerFirstChild)
    .typeText(detailedProductPage.symbols, string0)
    .click(detailedProductPage.symbolsResultsItem0)
    .expect(detailedProductPage.chipItem0.innerText).eql(string0);

testcafe如何选择条件元素

testcafe how to make the selection of the conditional element

testing

automation

automated-tests

e2e-testing

testcafe