0

我现有的大部分代码库只在少数地方使用“id”，“data-testId”属性存在。试过这段代码

import { configure } from '@testing-library/cypress';

configure({ testIdAttribute: ['data-testId','id'] });

但是，它仍然无法正常工作。

有没有办法在任何测试库函数中使用“id”值。

我的 HTML 代码类似于：

<div class="some random class name" id="userprofile-open" role="button">SB</div>

我想用这个代码点击那个元素：

cy.findByTestId("userprofile-open", { timeout: 120000 }).click();
4

2 回答 2

1

我不认为你可以用一组 id 配置测试库，参考API 配置，

import { configure } from '@testing-library/cypress'
configure({ testIdAttribute: 'id' })

但即使这样也失败了。相反，您必须使用 Cypress 命令来更改属性名称（只允许使用一个名称）。

cy.configureCypressTestingLibrary({ testIdAttribute: 'id' })

要使用任一/或属性名称，您可以动态更改属性名称，将其包装在自定义命令中（基于自定义查询）

Cypress.Commands.add('findByTestIdOrId', (idToFind) => {
  
  let result;

  const { queryHelpers } = require('@testing-library/dom');
  let queryAllByTestId = queryHelpers.queryAllByAttribute.bind(null, 'data-testId');

  result = queryAllByTestId(Cypress.$('body')[0], idToFind)
  if (result.length) return result;

  queryAllByTestId = queryHelpers.queryAllByAttribute.bind(null, 'id');
  result = queryAllByTestId(Cypress.$('body')[0], idToFind);
  if (result.length) return result;

  throw `Unable to find an element by: [data-test-id="${idToFind}"] or [id="${idToFind}"]`

})

cy.findByTestIdOrId('my-id')
  .should('have.attr', 'id', 'my-id')  
// passes and logs "expected <div#my-id> to have attribute id with the value my-id"

请注意，此自定义命令仅适用于同步 DOM。

如果您需要 Cypress 重试并搜索其中一个/或属性，请不要在自定义命令中使用 testing-library。

而是使用赛普拉斯.should()启用重试

Cypress.Commands.add('findByTestIdOrId', (selector, idToFind) => {
  cy.get(selector)
    .should('satisfy', $els => {
      const attrs = [...$els].reduce((acc, el) => {
        const id = el.id || el.getAttribute('data-test-id')  // either/or attribute
        if (id) {
          acc.push(id)
        }
        return acc
      }, [])
      return attrs.some(attr => attr === idToFind); // retries when false
    })
    .first();                                       // may be more than one
})

cy.findByTestIdOrId('div', 'my-id')
  .should('have.attr', 'id', 'my-id')  
// passes and logs "expected <div#my-id> to have attribute id with the value my-id"
于 2021-05-26T23:30:23.327 回答
0

通常的柏树方式 - 对元素的可见性和存在性进行固有检查以及在一段时间内包含重试是使用cy.get()

如果你想使用像 data-id 这样的属性来选择元素，你需要这个 sintax：cy.get('[propertyName="propertyValue"]')

如果你想通过 CSS 选择器选择一个元素，你只需像这样传递 CSS 选择器： cy.get('#id')

于 2021-05-26T12:18:37.383 回答