时间戳

首页 > 解决方案 > BackstopJS 测试整个应用程序页面

testing - BackstopJS 测试整个应用程序页面

问题描述

如何测试 backstop JS 中的所有页面。我只能测试一页。因为我只给出一个 url 和 referenceURL。我们怎样才能让它测试应用程序中的所有页面。只提供了一张截图。需要找到应用程序中的所有屏幕截图和更改。

标签： testing

解决方案

您可以为每个页面设置不同的场景并运行测试。或者你可以有两个文件来保持它的通用性和可重用性，并在一个文件中声明所有页面和设备详细信息，如下所示

基本配置.js

const projectId = "test"; // 

let baseUrl = "YourURL"; // 


// Replace the values of the below array with the relative URLs of your website. E.g., "/about", "/contact", "/pricing", etc.
// Use just "/" to test the homepage of your website.
// Add as many relative URLs as you need.
const relativeUrls =[
  "/about",
  "/documentation",
  "/case-studies/",
  "/solutions/",
  "/blog/"
];


// Leave the below array as is if you want to test your website using the viewports listed below.
// The suported viewports are: phone (320px X 480px), tablet (1024px X 768px), and desktop (1280px X 1024px).
// No other viewports are supported.
// You can remove the viewports that you don't need, but at least one of them is required.
const viewports = [
  "phone",
  "tablet",
  "desktop",
];

module.exports = {
  baseUrl,
  projectId,
  relativeUrls,
  viewports
};

在其他文件中，保留场景配置。

mainConfig.js

const THREE_SECONDS_IN_MS = 3000;
const scenarios = [];
const viewports = [];

basicConfig.relativeUrls.map(relativeUrl => {
  scenarios.push({
    label: relativeUrl,
    url: `${basicConfig.baseUrl}${relativeUrl}`,
    requireSameDimensions: false
  });
});

basicConfig.viewports.map(viewport => {
  if (viewport === "phone") {
    pushViewport(viewport, 320, 480);
  }
  if (viewport === "tablet") {
    pushViewport(viewport, 1024, 768);
  }
  if (viewport === "desktop") {
    pushViewport(viewport, 1280, 1024);
  }
});

function pushViewport(viewport, width, height) {
  viewports.push({
    name: viewport,
    width,
    height,
  });
}

module.exports = {
  id: basicConfig.projectId,
  viewports,
  scenarios,
  paths: {
    bitmaps_reference: "test/backstop_data/bitmaps_reference",
    bitmaps_test: "test/backstop_data/bitmaps_test",
    html_report: "test/backstop_data/html_report"
  },
  report: ["CI"],
  engine: "puppeteer",
  engineOptions: {
    args: ["--no-sandbox"]
  },
  asyncCaptureLimit: 5,
  asyncCompareLimit: 50,
};

希望对您有所帮助，如果您需要任何其他帮助，请告诉我。

谢谢！

推荐阅读