重复命令

Question

我在带有搜索输入的页面上进行了一些测试。

除第一个测试外，所有测试基本相同：type命令-变化。

在这种情况下，有什么办法可以避免每次测试中重复的代码？

it('Search test1', () => {
    searchedString = '0987416572';
    cy.get('input[data-test="Search"]').type(searchedString); //same for all test
    cy.get('span[data-test="Submit"]').should('be.visible'); //same for all test
    cy.get('input[data-test="Search"]').should('have.value', searchedString); //same for all test
    cy.get('span[data-test="Submit"]').click(); //same for all test
    cy.contains('No results');
  });

  it('Search test2', () => {
    searchedString = 'rewretretre';
    cy.get('input[data-test="Search"]').type(searchedString); //same for all test
    cy.get('span[data-test="Submit"]').should('be.visible'); //same for all test
    cy.get('input[data-test="Search"]').should('have.value',  searchedString); //same for all test
    cy.get('span[data-test="Submit"]').click(); //same for all test
    cy.contains('No results');
  });

  it('Search test3', () => {
    searchedString = '1234';
    cy.get('input[data-test="Search"]').type(searchedString); //same for all test
    cy.get('span[data-test="Submit"]').should('be.visible'); //same for all test
    cy.get('input[data-test="Search"]').should('have.value', searchedString); //same for all test
    cy.get('span[data-test="Submit"]').click(); //same for all test
    cy.get('div[data-test="Results"]').should('be.visible');
  });

为重复命令添加功能并调用该功能有意义吗？有什么更好的方法吗？

Answer 1

您可以创建一个Custom Command：

  

Cypress带有自己的API，用于创建自定义命令和   覆盖现有命令。

您的自定义命令看起来像（添加到cypress/support/commands.js中）：

Cypress.Commands.add('search', searchString => {
    cy.get('input[data-test="Search"]').type(searchedString)
    cy.get('span[data-test="Submit"]').should('be.visible')
    cy.get('input[data-test="Search"]').should('have.value', searchedString)
    cy.get('span[data-test="Submit"]').click()
})

然后您可以在测试中使用它，例如：

it('Search test3', () => {
    cy.search('1234')
    cy.get('div[data-test="Results"]').should('be.visible');
  })

Answer 2

如Cypress docs on custom commands中所述，并非所有内容都需要是自定义命令。在这种情况下，功能可以正常工作。

在文件顶部，输入：

 const submitSearch = (searchedString) => {
   cy.get('input[data-test="Search"]').type(searchedString)
   cy.get('span[data-test="Submit"]').should('be.visible')
   cy.get('input[data-test="Search"]').should('have.value', searchedString)
   cy.get('span[data-test="Submit"]').click()
 }

然后在您的测试中

it('Search test1', () => {
  submitSearch('0987416572')
  cy.contains('No results');
});