如何在 Cypress 測試中獲取 Gatsby.js 路由/端點的完整列表

Question

我目前正在使用 Cypress 為基於 Gatsby 的項目編寫一些 E2E 測試。

特別是對於一個測試，我想遍歷 Gatsby 站點的所有頁面，為了實現這一點，我需要一個包含所有 url 數組的測試裝置（例如endpoints.json ）。

我嘗試了以下方法（但都有局限性）：

1.運行node腳本查看src/pages文件夾下的文件夾結構

限制 - 這不考慮gatsby-node.js使用graphql動態生成的頁面

2. 運行節點腳本來抓取由gatsby-plugin-sitemap生成的sitemap.xml文件中的 URL

限制 - 該插件僅在 prod 構建中生成一個 sitemap.xml 文件，而不在 dev 中生成（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。

Answer 2

Cypress 有一個非常酷的新插件，它允許您獲取設備和 env 變量中的端點，稱為gatsby-cypress-endpoints 。 coreyward 的答案是完全有效的，但這應該允許您僅在運行 Cypress 時獲得端點。

Answer 3

請注意，對於更新版本的 Gatsby（尤其是 v3），您可能必須設置環境變量CI=true才能使建議的解決方案起作用。

我相信這是因為開發體驗發生了變化，其中頁面和查詢是按需處理的，而不是預先處理的。

以下標志FAST_DEV / QUERY_ON_DEMAND可能導致這種行為。