Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/Quramy/angular-puppeteer-demo

A demonstration repository explains how to using Puppeteer in unit testing
https://github.com/Quramy/angular-puppeteer-demo

angular automated-testing puppeteer

Last synced: 3 months ago
JSON representation

A demonstration repository explains how to using Puppeteer in unit testing

Host: GitHub
URL: https://github.com/Quramy/angular-puppeteer-demo
Owner: Quramy
Created: 2017-08-18T14:27:11.000Z (about 7 years ago)
Default Branch: master
Last Pushed: 2018-04-12T10:55:13.000Z (over 6 years ago)
Last Synced: 2024-05-11T02:33:10.402Z (6 months ago)
Topics: angular, automated-testing, puppeteer
Language: TypeScript
Homepage:
Size: 86.9 KB
Stars: 58
Watchers: 2
Forks: 16
Open Issues: 2
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

awesome-puppeteer - angular-puppeteer-demo - Demos how to use Puppeteer in Karma. (Testing)
awesome-puppeteer-zh - angular-puppeteer-demo - 演示如何在Karma中使用Puppeteer. (测试 / 贡献)

README

        # Angular Puppeteer Demo [![CircleCI](https://circleci.com/gh/Quramy/angular-puppeteer-demo.svg?style=svg)](https://circleci.com/gh/Quramy/angular-puppeteer-demo)

:sunglasses: A demonstration repository explains how to replace from Karma to Puppeteer.

## Running unit tests

Run `npm test` to execute the unit tests via ~~[Karma](https://karma-runner.github.io)~~ **[Puppeteer](https://github.com/GoogleChrome/puppeteer)**.

And captures screenshot viewport after each spec. [The captured images are here](https://s3.amazonaws.com/reg-publish-bucket-dc9621d1-4693-41e6-8e94-51eaeea162fb/06039132dbfe644740481e18dbc8e53019e91ace/index.html)(by [reg-suit](https://github.com/reg-viz/reg-suit)).

## How to replace test runner

In summary, I did:

1. Create a webpack-dev-middleware instance using angualr-cli's karma plugin.

1. Boot an Express server using thi middleware

  - This app serves a custom context HTML file([test/context.html](test/context.html)) while referring https://github.com/jasmine/jasmine#installation.

1. Expose Puppeteer's `screenshot` function and use it via `afterEach`.

1. Let the Puppeteer's page object go to the html file served by the Express app.

If you want more details, please see [puppeteer-test.js](puppeteer-test.js).