https://github.com/jochendiekenbrock/image-comparison-frontend

Frontend of an image comparison solution. Performs image comparisons during end to end tests and writes test results. Integrates with https://github.com/JochenDiekenbrock/image-comparison-backend
https://github.com/jochendiekenbrock/image-comparison-frontend

ci continuous-integration e2e-testing image-comparison jenkins protracor-image-comparison protractor

Last synced: about 1 month ago
JSON representation

Frontend of an image comparison solution. Performs image comparisons during end to end tests and writes test results. Integrates with https://github.com/JochenDiekenbrock/image-comparison-backend

• Host: GitHub
• URL: https://github.com/jochendiekenbrock/image-comparison-frontend
• Owner: JochenDiekenbrock
• License: gpl-3.0
• Created: 2018-09-20T21:20:20.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T05:55:09.000Z (about 2 years ago)
• Last Synced: 2024-12-17T02:56:51.249Z (about 2 months ago)
• Topics: ci, continuous-integration, e2e-testing, image-comparison, jenkins, protracor-image-comparison, protractor
• Language: TypeScript
• Homepage:
• Size: 2.75 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# image-comparison-frontend

Frontend of an image comparison solution. Performs image comparisons during end to end tests and writes test results

## Installation

```yarn add image-comparison-frontend```  

or  

```npm install --save image-comparison-frontend```

## Usage

## Configuration

You can specify a ```reportPath``` (relative to the current directory) to define where to put the .test-result.json

files.

ImageComparison will use the protractor-image-comparison screenshotPath by default.  

ResultReporter will use ```test-results``` in the current directory by default.

### With protractor-image-comparison

Configure [protractor-image-comparison](https://github.com/wswebcreation/protractor-image-comparison/).  

**Note**: ```returnAllCompareData``` must be set to true!

In your test, create an ImageComparison instance ```const imageComparison = new ImageComparison({config...});```  

and call a check function, for example ```await imageComparison.checkPage('startPage');```)                                               

### use custom image comparison together with ResultReporter

Create a ResultReporter with ```const reporter = new ResultReporter({config...})```  

and after running your test, call  ```await this.reporter.report(...);```

with a Result object containing information about the test run.

See ```src/image-comparison.ts``` for inspiration.

### API

#### checkElement

```

checkElement(

    elementFinder: ElementFinder,

    testName: string,

    protractorImageComparisonOptions?: any

): Promise

```

creates an image from the specified element and - if the base image already exists) compares it to the base image.

elementFinder: is any valid Protractor element finder, for example ```element(by.id('myElement'))```  

testName: a unique name for your test, for example 'anElement after adding'  

protractorImageComparisonOptions: optionally, you can add additional configuration that is passed through to protractor-image-comparison

returns a Promise resolving to void

#### checkPage

```

checkPage(

    testName: string, 

    protractorImageComparisonOptions?: any

): Promise 

```

Convenience function to create an image with ```checkElement``` specifying the page `````` as element.

testName: a unique name for your test, for example 'anElement after adding'

returns a Promise resolving to void

## Notes