如何在赛普拉斯测试中将 axios 获取的身份验证令牌传递给 cy.visit

Question

我正在使用 cypress 编写 e2e 测试来测试我们的 react 应用程序。在规范文件中，我在 beforeEach 中有以下代码，

describe("My Test", () => {
  beforeEach(() => {
    cy.visit(
      `/?token=${authToken}&testing=1`
    )
  })
...
}

我需要从另一个 url 获取 authToken 并且令牌每小时过期。我在单独的文件中有以下使用 axios 的代码：

import axios from "axios"

export const getAuthToken = () => {
  const data =...
  const url = `https://.../oauth2/v2.0/token`
  const config = {
    method: 'post' as const,
    url: url,
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    data: data
  }

  return axios(config).then((response) => {
    console.log(response.data)
    return (response.data["access_token"])
  })

但我不确定如何在 beforeEach 中调用 getAuthToken？

Answer 1

Cypress 只是 Javascript，因此您可以导入和使用该函数（如果它位于 /cypress 文件夹下的文件中，而不是 /src 的一部分）。

import { getAuthToken } from 'path/to/file/with/getAuthToken'

describe("My Test", () => {

  beforeEach(async () => {   make this hook async so we can await
    const authToken = await getAuthToken()
    cy.visit(
      `/?token=${authToken}&testing=1`
    )
  })

}

如果它是应用程序/src 的一部分，您可能无法导入它。

另一种方法是附加对窗口的引用

应用

import axios from "axios"

export const getAuthToken = () => {
  ...
}

if (window.Cypress) {
  window.getAuthToken = getAuthToken 
}

测试

describe("My Test", () => {

  beforeEach(() => { 
    const getAuthToken = cy.state('window').getAuthToken  // get reference
    getAuthToken().then(authToken => {
      cy.visit(
        `/?token=${authToken}&testing=1`
      )
    })
  })

}