[英]How to use Puppeteer and Headless Chrome with Cucumber-js
我正在尝试使用 Cucumber-js 进行 BDD,并使用 Headless Chrome 和 puppeteer 驱动浏览器测试。
使用来自Cucumber node example和headless chrome的文档,我收到以下错误,整个代码库在这里可用: github repo 。
错误:
// 功能/支持/world.js
const puppeteer = require('puppeteer');
var {defineSupportCode} = require('cucumber');
function CustomWorld() {
this.browser = puppeteer.launch();
}
defineSupportCode(function({setWorldConstructor}) {
setWorldConstructor(CustomWorld)
})
// 功能/step_definitions/hooks.js
const puppeteer = require('puppeteer');
var {defineSupportCode} = require('cucumber');
defineSupportCode(function({After}) {
After(function() {
return this.browser.close();
});
});
// 功能/step_definitions/browser_steps.js
const puppeteer = require('puppeteer');
var { defineSupportCode } = require('cucumber');
defineSupportCode(function ({ Given, When, Then }) {
Given('I am on the Cucumber.js GitHub repository', function (callback) {
const page = this.browser.newPage();
return page.goto('https://github.com/cucumber/cucumber-js/tree/master');
});
When('I click on {string}', function (string, callback) {
// Write code here that turns the phrase above into concrete actions
callback(null, 'pending');
});
Then('I should see {string}', function (string, callback) {
// Write code here that turns the phrase above into concrete actions
callback(null, 'pending');
});
});
puppeteer 是完全异步的,所以在使用this.browser
之前你必须等待它的初始化。
但是 setWorldConstructor 是同步函数,所以你不能在那里等。 在我的例子中,我使用了 Before hook
我的例子: https : //gist.github.com/dmitrika/7dee618842c00fbc35418b901735656b
黄瓜已经更新了。 这就是我用黄瓜实现我的异步木偶设置的方式。 要点在这里
const { BeforeAll, Before, AfterAll, After } = require('cucumber');
const puppeteer = require('puppeteer');
Before(async function() {
const browser = await puppeteer.launch({ headless: false, slowMo: 50 });
const page = await browser.newPage();
this.browser = browser;
this.page = page;
})
After(async function() {
// Teardown browser
if (this.browser) {
await this.browser.close();
}
// Cleanup DB
})
我们创建了puppeteer-cucumber-js来简化 Puppeteer 和 Cucumber 的工作:
npm install puppeteer-cucumber-js
features
文件夹Given, When, Then
语句的feature-name.feature
文件features/step-definitions
文件夹node ./node_modules/puppeteer-cucumber-js/index.js --headless
GitHub 上带有工作示例的源代码
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.