Skip to content

Commit

Permalink
Remove chromy as per discussion in #1180 (#1181)
Browse files Browse the repository at this point in the history
* remove chromy support as per Issue #1180

* update test from smoke tests

* feedback to error out on chromy

* revert jsonReport.json

* Update error message for chromy engine
  • Loading branch information
broksonic21 authored Apr 28, 2020
1 parent 2039ba4 commit f360992
Show file tree
Hide file tree
Showing 24 changed files with 22 additions and 1,135 deletions.
59 changes: 7 additions & 52 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
- Integrated Docker rendering -- to eliminate cross-platform rendering shenanigans
- CLI reports
- Render tests with **Chrome Headless**
- Simulate user interactions with **Puppeteer** and **ChromyJS** scripts
- Simulate user interactions with **Puppeteer** scripts
- JUnit reports
- Plays nice with CI and source control
- Run globally or locally as a standalone package app or `require('backstopjs')` right into your node app
Expand Down Expand Up @@ -199,7 +199,7 @@ hoverSelectors: [".my-nav-menu-item",".my-nav-menu-dropdown-item"],

### Key Press interactions
BackstopJS ships with an onReady script that allows user to key press on selectors...
NOTE: Supports Chromy and Puppeteer and takes arrays of selectors and key press values.
NOTE: Supports Puppeteer and takes arrays of selectors and key press values.

```json
scenarios: [
Expand Down Expand Up @@ -481,11 +481,11 @@ By default the base path is a folder called `engine_scripts` inside your Backsto
onBefore(engine, scenario, viewport, isReference, Engine, config)

```
engine: chromy or puppeteer engine instance
engine: puppeteer engine instance
scenario: currently running scenario config
viewport: viewport info
isReference: whether scenario contains reference URL property
Engine: Static class reference (Chromy or Puppeteer)
Engine: Static class reference (Puppeteer)
config: the whole config object
```

Expand Down Expand Up @@ -565,20 +565,15 @@ By default, BackstopJS saves generated resources into the `backstop_data` direct
```

### Changing the rendering engine
Puppeteer is currently the default value and will be installed by default. You could choose to use Chromy as well.
Puppeteer is currently the default value and will be installed by default.

#### Chrome-Headless (The latest webkit library)
To use chrome headless you have two options for scripting engines, the default _puppeteer_ (https://github.com/GoogleChrome/puppeteer) or the very cool _chromy.js_ (https://github.com/OnetapInc/chromy) library.
To use chrome headless you can currently use _puppeteer_ (https://github.com/GoogleChrome/puppeteer).


```json
"engine": "puppeteer"
```
or

```json
"engine": "chromy"
```

### Setting Puppeteer option flags
Backstop sets two defaults for Puppeteer:
Expand All @@ -599,44 +594,6 @@ You can add more settings (or override the defaults) with the engineOptions prop

More info here: [Puppeteer on github](https://github.com/GoogleChrome/puppeteer).


### Setting Chromy option flags
Chromy enables a lot of behavior via constructor options. See Chromy documentation for more info.

**NOTE:** Backstop sets defaults for many Chromy properties. Setting a parameter value with engineOptions will override any default value set by backstop. _But please watch out for the following..._
- (TLDR) Setting `port` as a chromy option flag is _very_ _very_ not advised. Instead, consider changing the `startingPort` property in the Backstop configuration. e.g. `"startingPort": 9333`
- Setting `chromeFlags` will override all chromeFlags properties set by backstop -- **EXCEPT FOR `--window-size`***... (i.e. `--window-size` flag will be added by backstop if not found in chromeFlags)
- Setting `--window-size` explicitly in `chromeFlags` will override values used in your viewport settings.


An example config below...

```js
"engineOptions": {
"waitTimeout": 120000,
"chromePath": "/path/to/chrome",
"chromeFlags": ["--disable-gpu", "--force-device-scale-factor=1"]
}
```

### Using Chromy static functions
To access use of Chromys static functions (such as addCustomDevice) the static chromy reference is sent as the fifth parameter to your onBefore/onReady scripts.

Example usage:

```js
module.exports = function (chromy, scenario, vp, isReference, chromyStatic) {
if(vp.label === "phone") {
chromyStatic.addCustomDevice({ name: "some-phone", /.../ });
chromy.emulate("some-phone");
}
}
```
For more info, see the [Chromy script documentation](https://github.com/OnetapInc/chromy).




### Using Docker for testing across different environments
We've found that different environments can render the same webpage in slightly different ways -- in particular with text. E.G. see the text in this example rendering slightly differently between Linux and Mac...

Expand Down Expand Up @@ -1006,7 +963,7 @@ https://github.com/garris/BackstopJS/issues/537#issuecomment-339710797
This is a grey area for BackstopJS. When you click a link to a new page inside of Chrome headless then you are unloading all your current app state and starting fresh with a new app state. If this is your case, the best practice is to simply create a new BackstopJS scenario with the required URL state etc. If you have some kind of situation which really requires this kind of behavior then it's doable -- take a look at this issue for inspiration... https://github.com/garris/BackstopJS/issues/657

### Chrome Zombies!
Sometimes when developing scripts -- browser errors can actually cause Chrome-Headless and Chromy to lose their special connection to each other. If you find that Chrome zombies are accumulating in your ENV spacetime continuum then please follow these steps:
Sometimes when developing scripts -- browser errors can actually cause Chrome-Headless to lose their special connection to each other. If you find that Chrome zombies are accumulating in your ENV spacetime continuum then please follow these steps:

1) DON’T PANIC!

Expand Down Expand Up @@ -1094,8 +1051,6 @@ Be sure to use a config `id` in your config file. See https://github.com/garris/
- [Changing the rendering engine](#changing-the-rendering-engine)
- [Chrome-Headless (The latest webkit library)](#chrome-headless-the-latest-webkit-library)
- [Setting Puppeteer option flags](#setting-puppeteer-option-flags)
- [Setting Chromy option flags](#setting-chromy-option-flags)
- [Using Chromy static functions](#using-chromy-static-functions)
- [Using Docker for testing across different environments](#using-docker-for-testing-across-different-environments)
- [Requirements for when you're using docker...](#requirements-for-when-youre-using-docker)
- [Integration options (local install)](#integration-options-local-install)
Expand Down
4 changes: 1 addition & 3 deletions assets/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ a:hover {
.casper {
color: #BD10E0;
}
.chromy {
.chrome {
color: #9013FE;
}

Expand All @@ -115,5 +115,3 @@ h1, p { font-size: 1em; color: #666; font-weight: 300}
@media (min-width: 1200px) {
h1, p { font-size: 2.1rem; }
}


43 changes: 0 additions & 43 deletions capture/engine_scripts/chromy/clickAndHoverHelper.js

This file was deleted.

22 changes: 0 additions & 22 deletions capture/engine_scripts/chromy/loadCookies.js

This file was deleted.

6 changes: 0 additions & 6 deletions capture/engine_scripts/chromy/onBefore.js

This file was deleted.

5 changes: 0 additions & 5 deletions capture/engine_scripts/chromy/onReady.js

This file was deleted.

25 changes: 4 additions & 21 deletions core/util/createBitmaps.js
Original file line number Diff line number Diff line change
@@ -1,17 +1,14 @@
const Chromy = require('chromy');
var cloneDeep = require('lodash/cloneDeep');
var fs = require('./fs');
var each = require('./each');
var pMap = require('p-map');

var runChromy = require('./runChromy');
var runPuppet = require('./runPuppet');

const ensureDirectoryPath = require('./ensureDirectoryPath');
var logger = require('./logger')('createBitmaps');

var CONCURRENCY_DEFAULT = 10;
const CHROMY_STARTING_PORT_NUMBER = 9222;

function regexTest (string, search) {
var re = new RegExp(search);
Expand Down Expand Up @@ -86,9 +83,6 @@ function saveViewportIndexes (viewport, index) {
}

function delegateScenarios (config) {
// TODO: start chromy here? Or later? maybe later because maybe changing resolutions doesn't work after starting?
// casper.start();

var scenarios = [];
var scenarioViews = [];

Expand Down Expand Up @@ -133,18 +127,11 @@ function delegateScenarios (config) {

const asyncCaptureLimit = config.asyncCaptureLimit === 0 ? 1 : config.asyncCaptureLimit || CONCURRENCY_DEFAULT;

if (/chrom./i.test(config.engine)) {
const PORT = (config.startingPort || CHROMY_STARTING_PORT_NUMBER);
var getFreePorts = require('./getFreePorts');
return getFreePorts(PORT, scenarioViews.length).then(freeports => {
console.log('These ports will be used:', JSON.stringify(freeports));
scenarioViews.forEach((scenarioView, i) => {
scenarioView.assignedPort = freeports[i];
});
return pMap(scenarioViews, runChromy, { concurrency: asyncCaptureLimit });
});
} else if (config.engine.startsWith('puppet')) {
if (config.engine.startsWith('puppet')) {
return pMap(scenarioViews, runPuppet, { concurrency: asyncCaptureLimit });
}
else if (/chrom./i.test(config.engine)) {
logger.error(`Chromy is no longer supported in version 5+. Please use version 4.x.x for chromy support.`);
} else {
logger.error(`Engine "${(typeof config.engine === 'string' && config.engine) || 'undefined'}" not recognized! If you require PhantomJS or Slimer support please use [email protected] or earlier.`);
}
Expand Down Expand Up @@ -195,9 +182,5 @@ module.exports = function (config, isReference) {
return writeCompareConfigFile(config.tempCompareConfigFileName, result);
});

if (/chrom./i.test(config.engine)) {
promise.then(() => Chromy.cleanup());
}

return promise;
};
Loading

0 comments on commit f360992

Please sign in to comment.