This project demonstrates the puppeteer-cucumber-typescript framework project setup.
1.NodeJS installed globally in the system. https://nodejs.org/en/download/
- Clone the repository into a folder
- Go inside the folder and run following command from terminal/command prompt
npm install
- All the dependencies from package.json and ambient typings would be installed in node_modules folder.
Just run the below command
npm test
The above command would trigger tests in chrome headless mode and generate cucumber json & html reports automatically!
The above command also would generate the test coverage with the help of puppeteer's jscoverage feature in conjugation with istanbul reports.
The coverage report would be available in coverage folder
Pleaase check the Test Coverage section for more details
Just change the init() method in the src/pages/pageHelper.ts file to following -
public async init() {
try {
this.browser = await launch({
headless: false, <---- set this to false
args: ['--disable-notifications', '--start-maximized'],
});
this.page = await this.browser.newPage();
} catch (Exception) {
throw new Error(Exception.toString());
}
}
In windows machines due to some strange reason(need to do more debugging) cucumber is not allowing string characters in command line. So workaround is to remove them.
Please see this issue
Just run the below command which would run the test scripts & generate report successfully
npm run test-windows
Feature: To search typescript in google
@TypeScriptScenario
Scenario: Typescript Google Search
Given I am on google page
When I type "Typescript"
Then I click on search button
Then I clear the search text
import { page } from '../support/hooks';
const { Given } = require('cucumber');
const chai = require('chai').use(require('chai-as-promised'));
const expect = chai.expect;
Given(/^I am on "(.*?)" search page$/, async (text) => {
if (text === 'google') {
await expect(page.getTitle()).to.eventually.equal('Google');
} else if (text === 'cucumber') {
await expect(page.getTitle()).to.eventually.equal(text + ' - Google Search');
} else if (text === 'puppeteer chrome') {
await expect(page.getTitle()).to.eventually.equal(text + ' - Google Search');
}
});
const searchPage: SearchPage = {
url: 'https://www.google.com',
searchTextBox: '#lst-ib',
searchButton: 'input[value="Google Search"]',
logo: 'div#logocont',
};
export {searchPage};
Following method takes screenshot on failure of each scenario
After(async (scenario) => {
if (scenario.result.status === Status.FAILED) {
// screenShot is a base-64 encoded PNG
const screenShot = await page.screenshot();
this.attach(screenShot, 'image/png');
}
});
Following configuration shows to call specific tags from feature files
"scripts": {
"lint": "tslint -c tslint.json 'src/**/*.ts'",
"pretest": "ts-node ./utils/json.ts",
"cucumber":
"cucumber-js ./features/*.feature
--require-module ts-node/register
--require './src/*/*.ts'
--format 'json:./reports/json/cucumber_report.json'",
"report": "ts-node ./utils/reporter.ts",
"test": "npm run cucumber && npm run report"
}
Currently this project has been integrated with cucumber-html-reporter, which is generated in the reports folder when you run npm test.
They can be customized according to user's specific needs.
This project has been integrated with puppeteer-to-istanbul module which helps in generating the coverage by puppeteer to istanbul reports.
For contributors who want to improve this repo by contributing some code, reporting bugs, issues or improving documentation - PR's are highly welcome, please maintain the coding style , folder structure , detailed description of documentation and bugs/issues with examples if possible.
MIT License
Copyright (c) 2018 Ram Pasala