如何增加页面加载的转到超时？

Question

tl；博士；

我需要增加超时时间：

COMMAND | Command `test` ended with an error after [32.585s]
COMMAND | BackstopExcpetion: Test #1 on undefined: GotoTimeoutError: goto() timeout

考虑以下服务器代码：

const http = require('http');

const hostname = '0.0.0.0';
const port = 3000;

http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/html');
  res.end(`<!DOCTYPE html>
    <title>Test Page</title>
    <script>console.log("Hello world!")</script>
    <h1>Hello world!</h1>
  `);
}).listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

和具有 4 * 3 = 12 个测试的 BackstopJS 配置：

{
  "id": "backstop_default",
  "viewports": [
    { "label": "phone_portrait",     "width":  320,   "height":  480 },
    { "label": "phone_landscape",    "width":  480,   "height":  320 },
    { "label": "tablet_portrait",    "width":  768,   "height": 1024 },
    { "label": "tablet_landscape",   "width": 1024,   "height":  768 }
  ],
  "scenarios": [
    { "label": "Test #1",   "url": "http://localhost:3000/",   "selectors": ["body"] },
    { "label": "Test #2",   "url": "http://localhost:3000/",   "selectors": ["body"] },
    { "label": "Test #3",   "url": "http://localhost:3000/",   "selectors": ["body"] }
  ],
  "paths": {
    "bitmaps_reference": "backstop_data/bitmaps_reference",
    "bitmaps_test": "backstop_data/bitmaps_test",
    "engine_scripts": "backstop_data/engine_scripts",
    "html_report": "backstop_data/html_report",
    "ci_report": "backstop_data/ci_report"
  },
  "report": ["browser"],
  "engine": "chrome",
  "engineFlags": []
}

当我开始 backstop test 时，一切正常：

D:\Temp\Supertemp\server-delay>backstop test
BackstopJS v3.0.22
Loading config:  D:\Temp\Supertemp\server-delay\backstop.json

COMMAND | Executing core for `test`
createBitmaps | Selcted 3 of 3 scenarios.
Starting Chromy: port:9222 --disable-gpu,--force-device-scale-factor=1,--window-size=320,480
Starting Chromy: port:9223 --disable-gpu,--force-device-scale-factor=1,--window-size=480,320
Starting Chromy: port:9224 --disable-gpu,--force-device-scale-factor=1,--window-size=768,1024
Starting Chromy: port:9225 --disable-gpu,--force-device-scale-factor=1,--window-size=1024,768
Starting Chromy: port:9226 --disable-gpu,--force-device-scale-factor=1,--window-size=320,480
Starting Chromy: port:9227 --disable-gpu,--force-device-scale-factor=1,--window-size=480,320
Starting Chromy: port:9228 --disable-gpu,--force-device-scale-factor=1,--window-size=768,1024
Starting Chromy: port:9229 --disable-gpu,--force-device-scale-factor=1,--window-size=1024,768
Starting Chromy: port:9230 --disable-gpu,--force-device-scale-factor=1,--window-size=320,480
Starting Chromy: port:9231 --disable-gpu,--force-device-scale-factor=1,--window-size=480,320
9224 LOG >  Hello world!
9227 LOG >  Hello world!
9226 LOG >  Hello world!
9222 LOG >  Hello world!
9223 LOG >  Hello world!
9225 LOG >  Hello world!
9228 LOG >  Hello world!
9231 LOG >  Hello world!
9229 LOG >  Hello world!
9230 LOG >  Hello world!
Starting Chromy: port:9232 --disable-gpu,--force-device-scale-factor=1,--window-size=768,1024
Starting Chromy: port:9233 --disable-gpu,--force-device-scale-factor=1,--window-size=1024,768
9232 LOG >  Hello world!
9233 LOG >  Hello world!
      COMMAND | Executing core for `report`
      compare | OK: Test #1 backstop_default_Test_1_0_body_0_phone_portrait.png
      compare | OK: Test #1 backstop_default_Test_1_0_body_1_phone_landscape.png
      compare | OK: Test #1 backstop_default_Test_1_0_body_2_tablet_portrait.png
      compare | OK: Test #1 backstop_default_Test_1_0_body_3_tablet_landscape.png
      compare | OK: Test #2 backstop_default_Test_2_0_body_0_phone_portrait.png
      compare | OK: Test #2 backstop_default_Test_2_0_body_1_phone_landscape.png
      compare | OK: Test #2 backstop_default_Test_2_0_body_2_tablet_portrait.png
      compare | OK: Test #2 backstop_default_Test_2_0_body_3_tablet_landscape.png
      compare | OK: Test #3 backstop_default_Test_3_0_body_0_phone_portrait.png
      compare | OK: Test #3 backstop_default_Test_3_0_body_1_phone_landscape.png
      compare | OK: Test #3 backstop_default_Test_3_0_body_2_tablet_portrait.png
      compare | OK: Test #3 backstop_default_Test_3_0_body_3_tablet_landscape.png
       report | Test completed...
       report | 12 Passed
       report | 0 Failed
       report | Writing browser report
       report | Browser reported copied
       report | Copied configuration to: D:\Temp\Supertemp\server-delay\backstop_data\html_report\config.js
      COMMAND | Executing core for `openReport`
   openReport | Opening report.
      COMMAND | Command `openReport` sucessfully executed in [0.114s]
      COMMAND | Command `report` sucessfully executed in [0.182s]
      COMMAND | Command `test` sucessfully executed in [8.495s]

但是现在让我们在发送页面之前让服务器延迟 40 秒：

const http = require('http');

const hostname = '0.0.0.0';
const port = 3000;

http.createServer((req, res) => {
  setTimeout(() => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'text/html');
    res.end(`<!DOCTYPE html>
      <title>Test Page</title>
      <script>console.log("Hello world!")</script>
      <h1>Hello world!</h1>
    `);
  }, 40000);
}).listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

和运行 backstop test:

D:\Temp\Supertemp\server-delay>backstop test
BackstopJS v3.0.22
Loading config:  D:\Temp\Supertemp\server-delay\backstop.json

COMMAND | Executing core for `test`
createBitmaps | Selcted 3 of 3 scenarios.
Starting Chromy: port:9222 --disable-gpu,--force-device-scale-factor=1,--window-size=320,480
Starting Chromy: port:9223 --disable-gpu,--force-device-scale-factor=1,--window-size=480,320
Starting Chromy: port:9224 --disable-gpu,--force-device-scale-factor=1,--window-size=768,1024
Starting Chromy: port:9225 --disable-gpu,--force-device-scale-factor=1,--window-size=1024,768
Starting Chromy: port:9226 --disable-gpu,--force-device-scale-factor=1,--window-size=320,480
Starting Chromy: port:9227 --disable-gpu,--force-device-scale-factor=1,--window-size=480,320
Starting Chromy: port:9228 --disable-gpu,--force-device-scale-factor=1,--window-size=768,1024
Starting Chromy: port:9229 --disable-gpu,--force-device-scale-factor=1,--window-size=1024,768
Starting Chromy: port:9230 --disable-gpu,--force-device-scale-factor=1,--window-size=320,480
Starting Chromy: port:9231 --disable-gpu,--force-device-scale-factor=1,--window-size=480,320
      COMMAND | Command `test` ended with an error after [32.585s]
      COMMAND | BackstopExcpetion: Test #1 on undefined: GotoTimeoutError: goto() timeout
9230 LOG >  Hello world!
9228 LOG >  Hello world!
9222 LOG >  Hello world!
9224 LOG >  Hello world!
9227 LOG >  Hello world!
9231 LOG >  Hello world!
9223 LOG >  Hello world!
9225 LOG >  Hello world!
9229 LOG >  Hello world!
9226 LOG >  Hello world!

如您所见，出现错误

COMMAND | Command `test` ended with an error after [32.585s]
COMMAND | BackstopExcpetion: Test #1 on undefined: GotoTimeoutError: goto() timeout

但是之后我们可以看到console.log在页面上执行了。 Backstop 开始无限等待……总之，这不是问题。

我对延长 30 秒超时的选项很感兴趣，因为在某些情况下开发服务器需要更多时间来提供内容。我该如何配置它？

Answer 1

在an onBeforeScript, you can access Chromy before any requests are issued and set the timeout (and other options):

module.exports = function (chromy) {
  chromy.options.gotoTimeout = 60000;
};

Answer 2

您可以通过如下添加 engineOptions 属性来传递 backstop.json 中的任何 chromy 选项

{
    "engineOptions": {
      "gotoTimeout": 60000
    }
}

如何增加页面加载的转到超时？

How to increase goto timeout for page load?

testing

google-chrome

regression-testing

node.js

backstop.js

tl；博士；