我正在尝试以这种方式通过剧作家测试来实现黄瓜:
这里是参考说明https://www.genui.com/resources/getting-started-with-bdd-using-cucumber-io
common-hooks.ts
import { ICustomWorld } from "./custom-world";
import {
ChromiumBrowser,
chromium
} from '@playwright/test'
import { After, AfterAll, Before, BeforeAll } from '@cucumber/cucumber'
let browser: ChromiumBrowser
BeforeAll(async function() {
browser = await chromium.launch({ headless: false, channel: "chrome" })
});
Before(async function(this: ICustomWorld) {
this.context = await browser.newContext()
this.page = await this.context.newPage()
});
After(async function(this: ICustomWorld) {
await this.page?.close()
await this.context?.close()
});
AfterAll(async function() {
await browser.close()
});
自定义世界.ts
import { IWorldOptions, World, setWorldConstructor } from '@cucumber/cucumber'
import { BrowserContext, Page } from '@playwright/test'
export interface ICustomWorld extends World {
context?: BrowserContext
page?: Page
}
export class CustomWorld extends World implements ICustomWorld {
constructor(options: IWorldOptions) {
super(options)
}
}
setWorldConstructor(CustomWorld)
simple_counter.steps.ts
import { Given, When, Then } from '@cucumber/cucumber'
import { expect } from '@playwright/test'
import { ICustomWorld } from './custom-world'
Given('User visits homepage', async function (this: ICustomWorld) {
const page = this.page!
await page.goto('localhost:3000')
})
When('User clicks the + button', async function (this: ICustomWorld) {
const page = this.page!
const plusButton = await page.locator('[data-testid="increase"]')
await expect(plusButton).toBeVisible()
await plusButton.click()
})
Then('User sees the counter get increased', async function (this: ICustomWorld) {
const page = this.page!
const counterText = await page.locator('[data-testid="counter-text"]')
await expect(counterText).toHaveText('Count: 1')
})
黄瓜.cjs
const config = {
paths: ['tests/acceptance/features/**/*.feature'],
require: ['tests/acceptance/step_definitions/**/*.ts'],
requireModule: ['ts-node/register'],
format: [
'summary',
'progress-bar',
],
formatOptions: { snippetInterface: 'async-await' },
publishQuiet: true,
};
module.exports = {
default: config
}
我不想更改 tsconfig 文件中的模块和目标。我用这个:
"target": "ES2022",
"module": "ES2022",
我收到以下错误消息
Cucumber expected a CommonJS module at 'C:\Users\User\source\repos\my-application\tests\acceptance\step_definitions\common-hooks.ts' but found an ES module. Either change the file to CommonJS syntax or use the --import directive instead of --require.
和完整消息
Original error message: Must use import to load ES Module: C:\Users\User\source\repos\myApp\tests\acceptance\step_definitions\common-hooks.ts require() of ES modules is not supported. require() of C:\Users\User\source\repos\myApp\tests\acceptance\step_definitions\common-hooks.ts from C:\Users\User\source\repos\myApp\node_modules\@cucumber\cucumber\lib\try_require.js is an ES module file as it is a .ts file whose nearest parent package.json contains "type": "module" which defines all .ts files in that package scope as ES modules. Instead change the requiring code to use import(), or remove "type": "module" from C:\Users\User\source\repos\myApp\package.json.
我觉得我不完全理解什么对我有用,但以下是行动:
require
中的 cucumber.cjs
重命名为 import
。requireModule
。test
中的 package.json
脚本从 cucumber-js test
更改为 cross-env NODE_OPTIONS='--loader ts-node/esm' cucumber-js
。