javascript - 如何在 Cypress 测试中获取 Gatsby.js 路由/端点的完整列表

Question

我目前正在使用 Cypress 为基于 Gatsby 的项目编写一些 E2E 测试。

特别是对于一个测试，我想循环遍历我的 Gatsby 站点的所有页面，为了实现这一点，我需要一个测试装置(例如 endpoints.json)，其中包括所有 url 的数组。

我尝试过以下方法(但都有局限性):

<强>1。运行节点脚本来检查 src/pages 文件夹

中的文件夹结构

限制 - 这不考虑使用 graphql 在 gatsby-node.js 中动态生成的页面

<强>2。运行节点脚本来抓取使用 gatsby-plugin-sitemap

生成的 sitemap.xml 文件中的 URL

限制 - 该插件仅在产品版本中生成 sitemap.xml 文件，而不是在开发版本中生成(cypress 运行开发服务器)

如果有人对我们如何在此环境中获取 Gatsby 端点的完整列表提出建议，我们将不胜感激。

Answer 1

您可能只想使用 GraphQL 中的数据在构建时生成所需格式的文件:

// gatsby-node.js
const path = require("path")
const fs = require("fs").promises

exports.onPostBuild = async ({ graphql }) => {
  const { data } = await graphql(`
    {
      pages: allSitePage {
        nodes {
          path
        }
      }
    }
  `)

  return fs.writeFile(
    path.resolve(__dirname, "all-pages.txt"),
    data.pages.nodes.map(node => node.path).join("\n")
  )
}

这将创建一个 .txt 文件，其中每个页面的路径位于一行。不过，您也可以通过将 JSON.stringify(data.pages) 作为第二个参数传递给 writeFile 来将数据写出为 JSON。