Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cloud support #28

Merged
merged 7 commits into from
Jul 1, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -59,3 +59,6 @@ typings/

# next.js build output
.next

#webstorm
.idea
32 changes: 29 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,13 +72,13 @@ It is exactly same as `seeVisualDiff` function, only an additional `selector` CS
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.
This method only works with puppeteer.
```
```js
I.screenshotElement("selectorForElement", "nameForImage");
```

Finally to use the helper in your test, you can write something like this:

```
```js
Feature('to verify monitoried Remote Db instances');

Scenario('Open the System Overview Dashboard', async (I, adminPage, loginPage) => {
Expand All @@ -102,6 +102,32 @@ Scenario('Compare CPU Usage Images', async (I) => {
});
```

AWS S3 support to upload and download various images is also provided.
It can be used by adding the *aws* code inside `"ResembleHelper"` in the `"helpers"` section in config file. The final result should look like:
```json
{
"helpers": {
"ResembleHelper" : {
"require": "codeceptjs-resemblehelper",
"screenshotFolder" : "<location of output folder>",
"baseFolder": "<location of base folder>",
"diffFolder": "<location of diff folder>",
"aws": {
"accessKeyId" : "<Your AccessKeyId>",
"secretAccessKey": "<Your secretAccessKey>",
"region": "<Region of Bucket>",
"bucketName": "<Bucket Name>"
}
}
}
}
```
When this option has been provided, the helper will download the base image from the S3 bucket.
This base image has to be located inside a folder named "*base*".
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.
If the `prepareBaseImage` option is marked `true`, then the generated base image will be uploaded to a folder named "*base*" in the S3 bucket.
>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.

### Known Issues:

> Issue in Windows where the image comparison is not carried out, and therefore no Mismatch Percentage is shown. See 'loadImageData' function in resemble.js
> Issue in Windows where the image comparison is not carried out, and therefore no Mismatch Percentage is shown. See 'loadImageData' function in resemble.js
125 changes: 125 additions & 0 deletions index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ const fs = require('fs');
const assert = require('assert');
const mkdirp = require('mkdirp');
const getDirName = require('path').dirname;
const AWS = require('aws-sdk');

/**
* Resemble.js helper class for CodeceptJS, this allows screen comparison
Expand Down Expand Up @@ -91,6 +92,106 @@ class ResembleHelper extends Helper {
else throw new Error("Method only works with Puppeteer");
}

/**
* This method uploads the diff and screenshot images into the bucket with diff image under bucketName/diff/diffImage and the screenshot image as
* bucketName/output/ssImage
* @param accessKeyId
* @param secretAccessKey
* @param region
* @param bucketName
* @param baseImage
* @param ifBaseImage - tells if the prepareBaseImage is true or false. If false, then it won't upload the baseImage.
* @returns {Promise<void>}
*/

async _upload(accessKeyId, secretAccessKey, region, bucketName, baseImage, ifBaseImage) {
console.log("Starting Upload... ");
const s3 = new AWS.S3({
accessKeyId: accessKeyId,
secretAccessKey: secretAccessKey,
region: region
});
fs.readFile(this.config.screenshotFolder + baseImage, (err, data) => {
if(err) throw err;
let base64data = new Buffer(data, 'binary');
const params = {
Bucket: bucketName,
Key: `output/${baseImage}`,
Body: base64data
};
s3.upload(params, (uerr, data) => {
if(uerr) throw uerr;
console.log(`Screenshot Image uploaded successfully at ${data.Location}`);
});
});
fs.readFile(this.config.diffFolder + "Diff_" + baseImage, (err, data) => {
if(err) console.log("Diff image not generated");
else {
let base64data = new Buffer(data, 'binary');
const params = {
Bucket: bucketName,
Key: `diff/Diff_${baseImage}`,
Body: base64data
};
s3.upload(params, (uerr, data) => {
if(uerr) throw uerr;
console.log(`Diff Image uploaded successfully at ${data.Location}`)
});
}
});
if(ifBaseImage) {
fs.readFile(this.config.baseFolder + baseImage, (err, data) => {
if(err) throw err;
else {
let base64data = new Buffer(data, 'binary');
const params = {
Bucket: bucketName,
Key: `base/${baseImage}`,
Body: base64data
};
s3.upload(params, (uerr, data) => {
if(uerr) throw uerr;
console.log(`Base Image uploaded at ${data.Location}`)
});
}
});
}
else {
console.log("Not Uploading base Image");
}
}

/**
* This method downloads base images from specified bucket into the base folder as mentioned in config file.
* @param accessKeyId
* @param secretAccessKey
* @param region
* @param bucketName
* @param baseImage
* @returns {Promise<void>}
*/

_download(accessKeyId, secretAccessKey, region, bucketName, baseImage) {
console.log("Starting Download...");
const s3 = new AWS.S3({
accessKeyId: accessKeyId,
secretAccessKey: secretAccessKey,
region: region
});
const params = {
Bucket: bucketName,
Key: `base/${baseImage}`
};
return new Promise((resolve, reject) => {
s3.getObject(params, (err, data) => {
if(err) console.error(err);
console.log(this.config.baseFolder + baseImage);
fs.writeFileSync(this.config.baseFolder + baseImage, data.Body);
resolve("File Downloaded Successfully");
});
});
}

/**
* Check Visual Difference for Base and Screenshot Image
* @param baseImage Name of the Base Image (Base Image path is taken from Configuration)
Expand All @@ -103,11 +204,23 @@ class ResembleHelper extends Helper {
options.tolerance = 0;
}

const awsC = this.config.aws;

if (awsC !== undefined && options.prepareBaseImage === false) {
await this._download(awsC.accessKeyId, awsC.secretAccessKey, awsC.region, awsC.bucketName, baseImage);
}

if (options.prepareBaseImage !== undefined && options.prepareBaseImage) {
await this._prepareBaseImage(baseImage);
}

const misMatch = await this._fetchMisMatchPercentage(baseImage, options);

if(awsC !== undefined) {
let ifUpload = options.prepareBaseImage === false ? false : true;
await this._upload(awsC.accessKeyId, awsC.secretAccessKey, awsC.region, awsC.bucketName, baseImage, ifUpload)
}

this.debug("MisMatch Percentage Calculated is " + misMatch);
assert(misMatch <= options.tolerance, "MissMatch Percentage " + misMatch);
}
Expand All @@ -127,12 +240,24 @@ class ResembleHelper extends Helper {
options.tolerance = 0;
}

const awsC = this.config.aws;

if (awsC !== undefined && options.prepareBaseImage === false) {
await this._download(awsC.accessKeyId, awsC.secretAccessKey, awsC.region, awsC.bucketName, baseImage);
}

if (options.prepareBaseImage !== undefined && options.prepareBaseImage) {
await this._prepareBaseImage(baseImage);
}

options.boundingBox = await this._getBoundingBox(selector);
const misMatch = await this._fetchMisMatchPercentage(baseImage, options);

if(awsC !== undefined) {
let ifUpload = options.prepareBaseImage === false ? false : true;
await this._upload(awsC.accessKeyId, awsC.secretAccessKey, awsC.region, awsC.bucketName, baseImage, ifUpload)
}

this.debug("MisMatch Percentage Calculated is " + misMatch);
assert(misMatch <= options.tolerance, "MissMatch Percentage " + misMatch);
}
Expand Down
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@
"mz": "^2.7.0",
"resemblejs": "^3.0.0",
"mkdirp": "^0.5.1",
"path": "^0.12.7"
"path": "^0.12.7",
"aws-sdk": "^2.476.0"
},
"keywords": [
"codeceptJS",
Expand Down