如何使我的测试的一部分可重用，以便可以在未来使用 Cypress Javascript 的其他测试中再次使用或调用它

Question

背景

嗨，我是 cypress 的新手，我有以下代码允许指定的用户类型（总共 4 个）登录。

由于这是主要测试之一，因此不必将相同的代码复制并粘贴到我的每个新测试中，我想让它们可重复使用，以便在未来的测试中，可以再次使用或“调用”它们.

将这些测试保存在单独的文件夹和单独的文件中会更容易，这样它们就可以自己维护，但可以在我创建的任何未来测试文件中在必要时调用它们。

例如，如果我有一个与教师相关的未来测试，我可以调用执行教师登录的函数，然后开始编写实际处理测试的脚本的其余部分，而无需每次都搞砸复制和粘贴.

执行登录部分的代码块如下（对于所有其他类型的用户几乎相同）

我一直在尝试研究如何创建方法和函数，但对我应该使用的结构不太确定，并且查看了文档但我有点困惑。

describe('Create Homework', function() {
  it('Create New Assignment', function() {
  cy.visit('http://www.demoapp.com')
  cy.contains('Log in')

  // Check that the user has indeed landed on the login page
  cy.url().should('include','/login')

  // Make a school selection
  cy.get('#school-selector-search-box')
  .type('Bristol Free School')
  // Click the suggestion
  .get('.suggestions > .ember-view.suggestion:nth-of-type(1) > .suggested-school-name').click()

  // Enter a username at this step
  cy.get('#identification')
  .type('gdawson_4319c')
  .should ('have.value','gdawson_4319c')

  // Enter a password at this step
  cy.get('#password')
  .type('demo')
  .should ('have.value','demo')

  // Proceed to login to account
  cy.get('.actions > .btn').click()

  // Assert that Dashboard is visible
  cy.get('h1.main-header-title')
  cy.contains ('Dashboard')
   })
 })

结果

能够将上面的代码包装成可以重用的东西（如函数），这样我就可以在另一个测试中使用这些步骤，而无需手动复制和粘贴它。这意味着我可以将它们移动到一个单独的文件中，并且仅在需要使用这些步骤时才调用它们，这将节省我的时间。

Answer 1

您可以使用自定义命令来完成此操作。

将此添加到您的cypress/support/commands.js文件中：

Cypress.Commands.add("login", (username, password) => {
  cy.visit('http://www.demoapp.com')
  cy.contains('Log in')

  // Check that the user has indeed landed on the login page
  cy.url().should('include','/login')

  // Make a school selection
  cy.get('#school-selector-search-box')
    .type('Bristol Free School')
    // Click the suggestion
    .get('.suggestions > .ember-view.suggestion:nth-of-type(1) > .suggested-school- 
   name').click()

  // Enter a username at this step
  cy.get('#identification')
    .type(username)
    .should ('have.value', username)

  // Enter a password at this step
  cy.get('#password')
    .type(password)
    .should ('have.value', password)

  // Proceed to login to account
  cy.get('.actions > .btn').click()

  // Assert that Dashboard is visible
  cy.get('h1.main-header-title')
  cy.contains ('Dashboard')
})

然后你可以像这样从你的测试中调用它，注意我使用了beforeEach，它将在每次测试之前运行登录，而不必多次编写它：

describe('Create Homework', function() {
  beforeEach(() => {
    cy.login('gdawson_4319c', 'demo');
  })

  it('Create New Assignment', function() {
    // Now only your test logic goes here
  })
})

Answer 2

除了自定义命令之外，您还可以创建一个 js 函数并在您喜欢的地方重用它。例如

const login = () => {
     //... your 'describe' and 'it' syntax if you like
}

describe('thing that uses login', () => {
    it('logs in', () => {
         login();
    });
});

如果您对重用部分中发生的事情的详细信息感兴趣，您可以通过这种方式输出有意义的测试脚本步骤。