“selectors.js” Cypress-Javascript

在编写Cypress测试时，要定位测试元素是非常重要的任务。这可以通过许多方式实现，但最常用的方法是使用CSS选择器。

在Cypress中，元素选择器可以通过“cy.get()”命令使用。但是，为了使测试更容易维护和易读，选择器通常在单独的文件中储存。这就是“selectors.js”文件的用处。

创建“selectors.js”文件

创建一个名为“selectors.js”的新文件，并在其中定义需要使用的选择器。

const selectors = {
  loginButton: 'button.login',
  usernameField: 'input#username',
  passwordField: 'input#password',
  errorNotification: 'span.error',
  successNotification: 'span.success'
}

export default selectors;

在上述例子中，定义了五个选择器，包括登录按钮，用户名输入框，密码输入框，错误通知和成功通知。您可以自定义选择器名称和所需的CSS选择器。最后，记得导出该对象以便其他测试脚本可以使用这些选择器。

在测试脚本中使用选择器

要在测试脚本中使用选择器，首先需要从“selectors.js”文件中导入它们。

import selectors from '../fixtures/selectors.js'

导入选择器后，可以使用“cy.get()”来根据选择器获取元素并执行相应的操作。

cy.get(selectors.loginButton).click()
cy.get(selectors.usernameField).type('myusername')
cy.get(selectors.passwordField).type('mypassword')
cy.get(selectors.errorNotification).should('be.visible')

在这个例子中，选择器被传递给“cy.get()”以查找按钮、输入框和通知。然后，Cypress通过“click()”、‘type()”和“should()”操作来执行相应的测试。

结论

通过将选择器单独储存到“selectors.js”文件中，测试变得更易于维护和改进。代码的可读性也大大提高，因为测试代码更加简洁和易读。