2

我正在尝试使用 cucumber-js 进行 BDD，并使用 Headless Chrome 和 puppeteer 驱动浏览器测试。

使用来自cucumber node example和headless chrome的文档，我得到以下错误，整个代码库在这里可用：github repo。

错误：

  1. 类型错误：this.browser.newPage 不是函数
  2. 类型错误：this.browser.close 不是函数

// 功能/支持/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');
    });
});
4

3 回答 3

2

puppeteer 是完全异步的，所以在使用this.browser.

但是 setWorldConstructor 是同步功能，所以你不能在那里等。在我的示例中，我使用了 Before hook

我的例子： https ://gist.github.com/dmitrika/7dee618842c00fbc35418b901735656b

于 2017-11-10T09:47:45.380 回答
1

黄瓜已经更新。这就是我用黄瓜实现我的异步 puppeteer 设置的方式。要点在这里

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
})
于 2018-05-24T16:00:42.450 回答
1

我们创建了puppeteer-cucumber-js来简化 Puppeteer 和 Cucumber 的使用：

  1. 跑npm install puppeteer-cucumber-js
  2. features在项目的根目录中创建一个文件夹
  3. 添加feature-name.feature包含您的Given, When, Then陈述的文件
  4. 创建features/step-definitions文件夹
  5. 为每个功能步骤添加要执行的 JavaScript 步骤
  6. 运行测试node ./node_modules/puppeteer-cucumber-js/index.js --headless

GitHub 上带有工作示例的源代码

于 2021-01-18T16:24:08.770 回答