javascript - 如何在 Cypress 中从单独的文件创建和调用选择器？

Question

我是 Cypress 的新手，正在努力让它工作。我需要创建一个带有选择器的文件(我想在“support”文件夹中)以便在我的项目文件中使用它们。

这是一个例子

describe('Test_spec_1', () => {
 it.only('Visits the site & verifies elements', () => {
  cy.get('[type=text]').should('be.visible')
  cy.get('[type=password]').should('be.visible') 
  cy.get('[type=submit]').should('be.visible')
  cy.get('[routerlink="/login"]').should('be.visible')
  cy.get('[routerlink="/reset-password"]').should('be.visible')
  cy.get('[routerlink="/support"]').should('be.visible')
  cy.get('[routerlink="/reset-password"]').should('be.visible')
 })
})

基本上，我需要将所有选择器放在一个单独的文件中，这样我就可以轻松调用它们并更新它们的值。我尝试了一些导出/导入，但没有成功。找不到任何地方如何正确使用它。如果您能给我一些如何做的提示，那就太好了。非常感谢。

Answer 1

请不要在 Cypress 中使用页面对象，请参阅本教程 Stop using Page Objects

Page objects problems

1. Page objects are hard to maintain and take away time from actual application development. I have never seen PageObjects documented well enough to actually help one write tests.

2. Page objects introduce additional state into the tests, which is separate from the application’s internal state. This makes understanding the tests and failures harder.

3. Page objects try to fit multiple cases into a uniform interface, falling back to conditional logic - a huge anti-pattern in our opinion.

4. Page objects make tests slow because they force the tests to always go through the application user interface.

3)为我杀了它。您会尝试在页面对象中找出更复杂的方法来满足不同的场景。

---

此问题Where to store selectors in Cypress.io给出了将选择器文本存储在一个地方的最简单方法。

// cypress/support/selectors.js

export default {
  mySelector: '.my-selector',
  mySelector2: '.my-selector-2'
};

// cypress/integration/one.spec.js

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

describe('test', () => {
  it('test', () => {
    cy.get(selectors.mySelector);
  });
});