Skip to content

Commit b5afcb8

Browse files
authored
Merge pull request #37 from pablopaul/patch-1
Correct typos
2 parents 8dfae97 + 2f133d4 commit b5afcb8

File tree

1 file changed

+20
-19
lines changed

1 file changed

+20
-19
lines changed

README.md

+20-19
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
# codeceptjs-resemblehelper
2-
Helper for resemble.js, used for Image comparison in Tests with WebdriverIO
2+
Helper for resemble.js, used for image comparison in tests with WebdriverIO.
33

4-
codeceptjs-resemblehelper is [CodeceptJS](https://codecept.io/) helper which can be used to compare screenshots and make the tests fail/pass based on the tolerance allowed
4+
codeceptjs-resemblehelper is a [CodeceptJS](https://codecept.io/) helper which can be used to compare screenshots and make the tests fail/pass based on the tolerance allowed.
55

66
If two screenshot comparisons have difference greater then the tolerance provided, the test will fail.
77

88
NPM package: https://www.npmjs.com/package/codeceptjs-resemblehelper
99

10-
To install the package, just run `npm install codeceptjs-resemblehelper`
10+
To install the package, just run `npm install codeceptjs-resemblehelper`.
1111

1212
### Configuration
1313

@@ -27,21 +27,20 @@ Example:
2727
}
2828
}
2929
```
30+
3031
To use the Helper, users must provide the three parameters:
3132

32-
`screenshotFolder` : This will always have the same value as `output` in Codecept configuration, this is the folder where webdriverIO
33-
saves a screenshot when using `I.saveScreenshot` method
33+
`screenshotFolder`: This will always have the same value as `output` in CodeceptJS configuration, this is the folder where WebdriverIO saves a screenshot when using `I.saveScreenshot` method.
3434

35-
`baseFolder`: This is the folder for base images, which will be used with screenshot for comparison
35+
`baseFolder`: This is the folder for base images, which will be used with screenshot for comparison.
3636

37-
`diffFolder`: This will the folder where resemble would try to store the difference image, which can be viewed later,
37+
`diffFolder`: This will the folder where resemble would try to store the difference image, which can be viewed later.
3838

3939
Usage, these are major functions that help in visual testing
4040

4141
First one is the `seeVisualDiff` which basically takes two parameters
42-
1) `baseImage` Name of the base image, this will be the image used for comparison with the screenshot image,
43-
it is mandatory to have the same image file names for base and screenshot image
44-
2) `options` options can be passed which include `prepaseBaseImage` and `tolerance`
42+
1) `baseImage` Name of the base image, this will be the image used for comparison with the screenshot image. It is mandatory to have the same image file names for base and screenshot image.
43+
2) `options` options can be passed which include `prepaseBaseImage` and `tolerance`.
4544

4645
```js
4746
/**
@@ -52,7 +51,7 @@ it is mandatory to have the same image file names for base and screenshot image
5251
*/
5352
async seeVisualDiff(baseImage, options) {}
5453
```
55-
Second one is the `seeVisualDiffForElement` which basically compares elements on the screenshot, Selector for element must be provided
54+
Second one is the `seeVisualDiffForElement` which basically compares elements on the screenshot, selector for element must be provided.
5655

5756
It is exactly same as `seeVisualDiff` function, only an additional `selector` CSS|XPath|ID locators is provided
5857
```js
@@ -67,14 +66,14 @@ It is exactly same as `seeVisualDiff` function, only an additional `selector` CS
6766
async seeVisualDiffForElement(selector, baseImage, options){}
6867
```
6968
> Note:
70-
`seeVisualDiffForElement` only works when the page for baseImage is open in the browser, so that webdriver can fetch coordinates of the provided selector
69+
`seeVisualDiffForElement` only works when the page for baseImage is open in the browser, so that WebdriverIO can fetch coordinates of the provided selector.
70+
71+
Third one is the `screenshotElement` which basically takes screenshot of the element. Selector for the element must be provided. It saves the image in the output directory as mentioned in the config folder.
7172

72-
Third one is the `screenshotElement` which basically takes screenshot of the element. Selector for the element must be provided.
73-
It saves the image in the output directory as mentioned in the config folder.
7473
```js
7574
I.screenshotElement("selectorForElement", "nameForImage");
7675
```
77-
>Note: This method only works with puppeteer.
76+
> Note: This method only works with puppeteer.
7877
7978
Finally to use the helper in your test, you can write something like this:
8079

@@ -101,7 +100,7 @@ Scenario('Compare CPU Usage Images', async (I) => {
101100
I.seeVisualDiffForElement("//div[@class='panel-container']", "Complete_Dashboard_Image.png", {prepareBaseImage: false, tolerance: 3});
102101
});
103102
```
104-
>Note: `seeVisualDiff` and `seeVisualDiffElement` work only when the dimensions of the screenshot as well as the base image are same so as to avoid unexpected results.
103+
> Note: `seeVisualDiff` and `seeVisualDiffElement` work only when the dimensions of the screenshot as well as the base image are same so as to avoid unexpected results.
105104
106105
### Ignored Box
107106
You can also exclude part of the image from comparison, by specifying the excluded area in pixels from the top left.
@@ -117,15 +116,17 @@ const box = {
117116
I.seeVisualDiff("image.png", {prepareBaseImage: true, tolerance: 1, ignoredBox: box});
118117
```
119118
After this, that specific mentioned part will be ignored while comparison.
120-
This works with both `seeVisualDiff` and `seeVisualDiffForElement`.
119+
This works for `seeVisualDiff` and `seeVisualDiffForElement`.
121120

122121
### Allure Reporter
123122
Allure reports may also be generated directly from the tool. To do so, add
123+
124124
```
125125
"plugins": {
126126
"allure": {}
127127
}
128128
```
129+
129130
in the config file.
130131
The attachments will be added to the report only when the calulated mismatch is greater than the given tolerance.
131132
Set `output` to where the generated report is to be stored. Default is the output directory of the project.
@@ -155,8 +156,8 @@ When this option has been provided, the helper will download the base image from
155156
This base image has to be located inside a folder named "*base*".
156157
The resultant output image will be uploaded in a folder named "*output*" and diff image will be uploaded to a folder named "*diff*" in the S3 bucket.
157158
If the `prepareBaseImage` option is marked `true`, then the generated base image will be uploaded to a folder named "*base*" in the S3 bucket.
158-
>Note: The tests may take a bit longer to run when the AWS configuration is provided as determined by the internet speed to upload/download images.
159+
> Note: The tests may take a bit longer to run when the AWS configuration is provided as determined by the internet speed to upload/download images.
159160
160161
### Known Issues:
161162

162-
> Issue in Windows where the image comparison is not carried out, and therefore no Mismatch Percentage is shown. See 'loadImageData' function in resemble.js
163+
> Issue in Windows where the image comparison is not carried out, and therefore no Mismatch Percentage is shown. See 'loadImageData' function in resemble.js

0 commit comments

Comments
 (0)