如何将axios获取的auth token传递给cypress测试中的cy.visit

Question

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

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

我需要从另一个网址获取 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`
      )
    })
  })

}