当必须在 Cypress 中重用选择器时，哪个是最佳选择？

Question

我知道 Cypress 团队鼓励使用操作而不是页面对象，那么当必须重用元素时，哪个是最佳选择？

我不想在很多地方更新选择器，所以我选择了这个选项：

Cypress.Commands.add('getStartDateInput',() => cy.get('input[t-selector="startDate"]');

因此，如果我必须在其他一些地方与此元素交互，我将调用此新操作。即使这导致我在我的命令文件中有许多新的 'mini' 操作，只是为了不必在许多地方更新选择器。

我做的对吗？还有其他建议吗？

Answer 1

我使用一种非常简单的 javascript 方法来管理和重用我的定位器。如果它适用于您的用例，您也可以使用它。

第 1 步： 创建一个 pageObject 文件夹（我在 integration 文件夹中创建它）并在其中创建一个 js 文件。我们将其命名为 selectors.js。在 selectors.js 文件中，像这样编写所有选择器：

export default {
    toDoBtn: 'button[type="submit"]',
    starteDate: 'input[t-selector="startDate"]',
    input: 'form > input',
    listItems: 'ul > li'
};

第 2 步： 现在使用 import 命令将此文件导入您的规范文件。

import selectors from './pageObject/selectors.js';

然后在你的测试中你可以使用：

cy.get(selectors.starteDate).should('be.visible')

当必须在 Cypress 中重用选择器时，哪个是最佳选择？

Which would be the best choice when having to reuse selectors in Cypress?

node.js

testing

automated-tests

refactoring

cypress