mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-15 09:34:19 +08:00
chore(e2e): remove old e2e testing
This commit is contained in:
Adam Bradley
@ -1,122 +0,0 @@
|
||||
# End-To-End Testing Scripts
|
||||
|
||||
This document describes the process of installing the dependencies for, running, and writing end-to-end tests for ionic core. Your working directory is assumed to be `core`.
|
||||
|
||||
---
|
||||
|
||||
## Dependencies
|
||||
|
||||
Before you proceed, make sure you're running [**Node 7.6.0+**](https://nodejs.org/en/download/):
|
||||
|
||||
```sh
|
||||
node -v # Should be >= 7.6.0
|
||||
```
|
||||
|
||||
And that you've installed all packages:
|
||||
|
||||
```sh
|
||||
npm install
|
||||
```
|
||||
|
||||
## Running The Tests
|
||||
|
||||
To run the end-to-end tests:
|
||||
|
||||
```
|
||||
npm run e2e
|
||||
```
|
||||
|
||||
## Writing an End-To-End Test
|
||||
|
||||
To create an end-to-end test, you'll need to create a directory containing your test page and the tests themselves. Create a directory in your component's `test` directory. That directory should contain an `index.html` and an `e2e.js` file. So, if I were writing a test called `basic` for the `button` component:
|
||||
|
||||
```
|
||||
button
|
||||
└── test/
|
||||
└── basic/
|
||||
├── e2e.js
|
||||
└── index.html
|
||||
```
|
||||
|
||||
In your `e2e.js` file, you can group tests together using [Mocha](https://mochajs.org/)'s `describe` function:
|
||||
|
||||
```js
|
||||
describe('button: basic', () => {
|
||||
// Write tests here.
|
||||
});
|
||||
```
|
||||
|
||||
To register a test, use the `register` method from `scripts/e2e`. The `register` function takes two arguments, a description and a callback. The callback is passed the test [driver](https://www.npmjs.com/package/selenium-webdriver) as its only argument. For async actions, simply return a Promise from your callback.
|
||||
|
||||
```js
|
||||
const { register } = require('../../../../../scripts/e2e');
|
||||
|
||||
describe('button: basic', () => {
|
||||
register('my test', driver => {
|
||||
// Use the driver here.
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
The most basic, and most common, test simply navigates to your page to ensure it renders properly. For more complicated cases, you may need to extend the `Page` class provided by the e2e module.
|
||||
|
||||
### Simple Navigation Tests
|
||||
|
||||
To write a simple navigation test, you can use the `navigate` function from the e2e module:
|
||||
|
||||
```js
|
||||
const { register, navigate } = require('../../../../../scripts/e2e');
|
||||
|
||||
describe('button: basic', () => {
|
||||
register('navigates', navigate('http://localhost:3333/src/components/button/test/basic'));
|
||||
});
|
||||
```
|
||||
|
||||
### Extending The `Page` Class
|
||||
|
||||
For more complicated tests, you may need to extend the `Page` class:
|
||||
|
||||
```js
|
||||
const { register, Page } = require('../../../../scripts/e2e');;
|
||||
|
||||
class ButtonTestPage extends Page {
|
||||
constructor(driver) {
|
||||
super(driver, 'http://localhost:3333/src/components/button/test/basic');
|
||||
}
|
||||
|
||||
someMethod() {
|
||||
// ...
|
||||
}
|
||||
}
|
||||
|
||||
describe('button: basic', () => {
|
||||
register('some test', driver => {
|
||||
const page = new ButtonTestPage(driver);
|
||||
return page.someMethod();
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
## Snapshot
|
||||
|
||||
You can also take snapshots of each end-to-end test to check for visual regressions. You'll need to export the `IONIC_SNAPSHOT_KEY` environment variable to upload to the snapshot app. Ask someone from Ionic for the key.
|
||||
|
||||
**Snapshot compares a base snapshot made on MacOS with a retina screen. (2560x1600) It does not work for Windows, Linux, or non-retina Macs.**
|
||||
|
||||
To take snapshots:
|
||||
|
||||
```bash
|
||||
npm run snapshot
|
||||
```
|
||||
|
||||
To take snapshots of a specific folder:
|
||||
|
||||
```bash
|
||||
npm run snapshot -- -f=toast
|
||||
```
|
||||
|
||||
## TODO
|
||||
|
||||
- [ ] Move this script up a directory and use for all packages?
|
||||
- [ ] Turn off animations and then adjust the wait time accordingly
|
||||
- [ ] Adjustments will likely be needed when the Snapshot tool has better reporting, for example the tool will likely have `start` and `finish` methods (or some such thing)
|
||||
@ -1,205 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const fs = require('fs');
|
||||
const glob = require('glob');
|
||||
const Mocha = require('mocha');
|
||||
const path = require('path');
|
||||
const webdriver = require('selenium-webdriver');
|
||||
const argv = require('yargs').argv;
|
||||
|
||||
const Page = require('./page');
|
||||
const Snapshot = require('./snapshot');
|
||||
|
||||
const platforms = ['md', 'ios'];
|
||||
|
||||
let driver;
|
||||
let snapshot;
|
||||
let specIndex = 0;
|
||||
let takeScreenshots = false;
|
||||
let folder = null;
|
||||
|
||||
function startDevServer() {
|
||||
const server = require('@stencil/dev-server/dist'); // TODO: fix after stencil-dev-server PR #16 is merged
|
||||
const cmdArgs = [
|
||||
'--config',
|
||||
path.join(__dirname, '../../stencil.config.js'),
|
||||
'--no-open'
|
||||
];
|
||||
|
||||
return server.run(cmdArgs);
|
||||
}
|
||||
|
||||
function generateTestId() {
|
||||
let chars = 'abcdefghjkmnpqrstuvwxyz';
|
||||
let id = chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
chars += '0123456789';
|
||||
while (id.length < 3) {
|
||||
id += chars.charAt(Math.floor(Math.random() * chars.length));
|
||||
}
|
||||
return id;
|
||||
}
|
||||
|
||||
function getTestFiles() {
|
||||
return new Promise((resolve, reject) => {
|
||||
let src = path.join(__dirname, '../../src/**/e2e.js');
|
||||
|
||||
if (folder) {
|
||||
src = path.join(__dirname, `../../src/**/${folder}/**/e2e.js`);
|
||||
}
|
||||
|
||||
glob(src, (err, files) => {
|
||||
if (err) {
|
||||
reject(err);
|
||||
} else {
|
||||
resolve(files);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function startDriver() {
|
||||
// setting chrome options to start the browser without an info bar
|
||||
let chromeCapabilities = webdriver.Capabilities.chrome();
|
||||
const chromeOptions = {
|
||||
// 'args': ['--disable-infobars']
|
||||
};
|
||||
chromeCapabilities.set('chromeOptions', chromeOptions);
|
||||
|
||||
return new webdriver.Builder()
|
||||
.withCapabilities(chromeCapabilities)
|
||||
.forBrowser('chrome')
|
||||
.build();
|
||||
}
|
||||
|
||||
function processCommandLine() {
|
||||
if (argv.snapshot) {
|
||||
takeScreenshots = true;
|
||||
}
|
||||
|
||||
if (argv.f || argv.folder) {
|
||||
folder = argv.f || argv.folder;
|
||||
}
|
||||
}
|
||||
|
||||
function registerE2ETest(desc, tst) {
|
||||
// NOTE: Do not use an arrow function here because: https://mochajs.org/#arrow-functions
|
||||
it(desc, async function() {
|
||||
await tst(driver, this);
|
||||
if (takeScreenshots) {
|
||||
await snapshot.takeScreenshot(driver, {
|
||||
name: this.test.fullTitle().replace(/(^[\w-]+\/[\w-]+)/, '$1:'),
|
||||
specIndex: specIndex++
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getTotalTests(suite) {
|
||||
let ttl = suite.tests.length;
|
||||
suite.suites.forEach(s => (ttl += getTotalTests(s)));
|
||||
return ttl;
|
||||
}
|
||||
|
||||
async function run() {
|
||||
// TODO look into removing chrome startup from the timeout
|
||||
const mocha = new Mocha({
|
||||
timeout: 5000,
|
||||
slow: 2000
|
||||
});
|
||||
|
||||
driver = startDriver();
|
||||
processCommandLine();
|
||||
|
||||
const devServer = await startDevServer();
|
||||
|
||||
const files = await getTestFiles();
|
||||
files.forEach(f => mocha.addFile(f));
|
||||
snapshot = await mochaLoadFiles(mocha);
|
||||
const failures = await mochaRun(mocha);
|
||||
|
||||
if (takeScreenshots) {
|
||||
snapshot.finish();
|
||||
}
|
||||
|
||||
devServer.close();
|
||||
await driver.quit();
|
||||
|
||||
if (failures) {
|
||||
throw new Error(failures);
|
||||
}
|
||||
}
|
||||
|
||||
function mochaRun(mocha) {
|
||||
return new Promise((resolve, reject) => {
|
||||
mocha.run(function(failures) {
|
||||
resolve(failures);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function mochaLoadFiles(mocha) {
|
||||
return new Promise((resolve, reject) => {
|
||||
mocha.loadFiles(() => {
|
||||
specIndex = 0;
|
||||
|
||||
snapshot = new Snapshot({
|
||||
groupId: 'ionic-core',
|
||||
appId: 'snapshots',
|
||||
testId: generateTestId(),
|
||||
domain: 'ionic-snapshot-go.appspot.com',
|
||||
// domain: 'localhost:8080',
|
||||
sleepBetweenSpecs: 750,
|
||||
totalSpecs: getTotalTests(mocha.suite),
|
||||
platformDefaults: {
|
||||
browser: 'chrome',
|
||||
platform: 'linux',
|
||||
params: {
|
||||
platform_id: 'chrome_400x800',
|
||||
platform_index: 0,
|
||||
platform_count: 1,
|
||||
width: 400,
|
||||
height: 814
|
||||
}
|
||||
},
|
||||
accessKey: process.env.IONIC_SNAPSHOT_KEY
|
||||
});
|
||||
resolve(snapshot);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function parseSemver(str) {
|
||||
return /(\d+)\.(\d+)\.(\d+)/
|
||||
.exec(str)
|
||||
.slice(1)
|
||||
.map(Number);
|
||||
}
|
||||
|
||||
function validateNodeVersion(version) {
|
||||
const [major, minor] = parseSemver(version);
|
||||
|
||||
if (major < 7 || (major === 7 && minor < 6)) {
|
||||
throw new Error(
|
||||
'Running the end-to-end tests requires Node version 7.6.0 or higher.'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Invoke run() only if executed directly i.e. `node ./scripts/e2e`
|
||||
if (require.main === module) {
|
||||
validateNodeVersion(process.version);
|
||||
run()
|
||||
.then(() => {})
|
||||
.catch(err => {
|
||||
console.log(err);
|
||||
// fail with non-zero status code
|
||||
process.exit(1);
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
Page,
|
||||
platforms: platforms,
|
||||
register: registerE2ETest,
|
||||
run: run
|
||||
};
|
||||
@ -1,25 +0,0 @@
|
||||
const webdriver = require('selenium-webdriver');
|
||||
const By = webdriver.By;
|
||||
const until = webdriver.until;
|
||||
|
||||
module.exports = class E2ETestPage {
|
||||
constructor(driver, url) {
|
||||
this.url = url;
|
||||
this.driver = driver;
|
||||
}
|
||||
|
||||
async navigate(tagName = '') {
|
||||
this.driver.navigate().to(this.url);
|
||||
this.driver.manage().timeouts().implicitlyWait(10000);
|
||||
await this.driver.wait(until.elementLocated(By.css(`.hydrated`)));
|
||||
const tag = tagName || '.hydrated';
|
||||
return await this.driver.wait(until.elementIsVisible(this.driver.findElement(By.css(tag))));
|
||||
}
|
||||
|
||||
async present(clickTarget, options) {
|
||||
await this.navigate(clickTarget);
|
||||
this.driver.findElement(By.css(clickTarget)).click();
|
||||
await this.driver.wait(until.elementLocated(By.css(options.waitFor)));
|
||||
return await this.driver.wait(until.elementIsVisible(this.driver.findElement(By.css(options.waitFor))));
|
||||
}
|
||||
}
|
||||
@ -1,137 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
const request = require('request');
|
||||
|
||||
class Snapshot {
|
||||
constructor(options) {
|
||||
this.appId = (options && options.appId) || 'test_app';
|
||||
this.domain = (options && options.domain) || 'localhost:8080';
|
||||
this.groupId = (options && options.groupId) || 'test_group';
|
||||
this.sleepTime = (options && options.sleepBetweenSpecs) || 500;
|
||||
this.totalSpecs = options && options.totalSpecs;
|
||||
this.accessKey = options && options.accessKey;
|
||||
this.platformId =
|
||||
options && options.platformDefaults && options.platformDefaults.params && options.platformDefaults.params.platform_id;
|
||||
this.platformIndex =
|
||||
options && options.platformDefaults && options.platformDefaults.params && options.platformDefaults.params.platform_index;
|
||||
this.platformCount =
|
||||
options && options.platformDefaults && options.platformDefaults.params && options.platformDefaults.params.platform_count;
|
||||
this.width =
|
||||
(options && options.platformDefaults && options.platformDefaults.params && options.platformDefaults.params.width) || -1;
|
||||
this.height =
|
||||
(options && options.platformDefaults && options.platformDefaults.params && options.platformDefaults.params.height) || -1;
|
||||
|
||||
this.testId = (options && options.testId);
|
||||
this.queue = [];
|
||||
this.highestMismatch = 0;
|
||||
this.mismatches = [];
|
||||
this.results = {};
|
||||
}
|
||||
|
||||
async finish() {
|
||||
console.log('waiting for uploads to complete');
|
||||
await Promise.all(this.queue);
|
||||
console.log(`done processing ${this.queue.length} screenshots`);
|
||||
console.log(`${this.mismatches.length} snapshots had significant mismatches`);
|
||||
console.log(`Test Id: ${this.testId}`);
|
||||
console.log(`URL: https://${this.domain}/${this.groupId}/${this.appId}/${this.testId}`);
|
||||
}
|
||||
|
||||
async takeScreenshot(driver, options) {
|
||||
this._resizeWindow(driver);
|
||||
await this._allowForAnnimation();
|
||||
const screenshot = await this._takeScreenshot(driver, options);
|
||||
return this._post(screenshot);
|
||||
}
|
||||
|
||||
_allowForAnnimation() {
|
||||
return new Promise((resolve, reject) => {
|
||||
setTimeout(function() {
|
||||
resolve();
|
||||
}, this.sleepTime);
|
||||
});
|
||||
}
|
||||
|
||||
_post(screenshot) {
|
||||
const p = new Promise((resolve, reject) => {
|
||||
request.post(`http://${this.domain}/screenshot`, { form: screenshot }, (error, res, body) => {
|
||||
if (error) {
|
||||
console.error(error);
|
||||
} else if (res.statusCode > 400) {
|
||||
console.log('error posting screenshot:', response.statusCode, body);
|
||||
} else {
|
||||
const data = JSON.parse(body);
|
||||
this.highestMismatch = Math.max(this.highestMismatch, data.Mismatch);
|
||||
const resultKey = (data.Mismatch * 1000 + 1000000 + '').split('.')[0] + '-' + screenshot.spec_index;
|
||||
this.results[resultKey] = {
|
||||
index: screenshot.spec_index,
|
||||
name: screenshot.description,
|
||||
mismatch: Math.round(data.Mismatch * 100) / 100,
|
||||
compareUrl: data.CompareUrl,
|
||||
screenshotUrl: data.ScreenshotUrl
|
||||
};
|
||||
if (data.IsMismatch) {
|
||||
this.mismatches.push(resultKey);
|
||||
}
|
||||
}
|
||||
resolve(res);
|
||||
});
|
||||
});
|
||||
this.queue.push(p);
|
||||
return Promise.resolve(true);
|
||||
}
|
||||
|
||||
_resizeWindow(driver) {
|
||||
return driver
|
||||
.manage()
|
||||
.window()
|
||||
.setSize(this.width, this.height);
|
||||
}
|
||||
|
||||
_getQueryString(field, url) {
|
||||
var reg = new RegExp( '[?&]' + field + '=([^&#]*)', 'i' );
|
||||
var string = reg.exec(url);
|
||||
return string ? string[1] : null;
|
||||
};
|
||||
|
||||
async _takeScreenshot(driver, options) {
|
||||
const capabilities = await driver.getCapabilities();
|
||||
|
||||
const png = await driver.takeScreenshot();
|
||||
let url = await driver.getCurrentUrl();
|
||||
|
||||
// TODO remove the modified url/description once we're happy with the comparison to v3
|
||||
let platform = 'android';
|
||||
|
||||
if (url.indexOf('ionic:mode') > -1) {
|
||||
platform = this._getQueryString('ionic:mode', url);
|
||||
}
|
||||
|
||||
let replacedUrl = url.replace('3333', '8876').replace('src/components', '/e2e').replace('test/', '').replace(`?ionic:mode=${platform}`, '');
|
||||
url = replacedUrl + `/index.html?ionic:mode=${platform}&ionicOverlayCreatedDiff=0&snapshot=true`;
|
||||
|
||||
let description = options.name.replace(': ', `: ${platform} `) + '.';
|
||||
|
||||
return Promise.resolve({
|
||||
app_id: this.appId,
|
||||
group_id: this.groupId,
|
||||
description: description,
|
||||
spec_index: options.specIndex,
|
||||
total_specs: this.totalSpecs,
|
||||
test_id: this.testId,
|
||||
url: url,
|
||||
png_base64: png,
|
||||
height: this.height,
|
||||
width: this.width,
|
||||
platform_count: this.platformCount,
|
||||
platform_id: this.platformId,
|
||||
platform_index: this.platformIndex,
|
||||
browser: capabilities.get('browserName'),
|
||||
platform: capabilities.get('platform'),
|
||||
version: capabilities.get('version'),
|
||||
access_key: this.accessKey
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Snapshot;
|
||||
@ -1,27 +0,0 @@
|
||||
const { By, until } = require('selenium-webdriver');
|
||||
|
||||
async function getElement(driver, selector) {
|
||||
driver.wait(until.elementLocated(By.css(selector)));
|
||||
const element = driver.findElement(By.css(selector));
|
||||
await driver.wait(until.elementIsVisible(driver.findElement(By.css(selector))));
|
||||
return element;
|
||||
}
|
||||
|
||||
async function waitAndGetElementById(driver, selector) {
|
||||
driver.wait(until.elementLocated(By.id(selector)));
|
||||
const element = driver.findElement(By.id(selector));
|
||||
await driver.wait(until.elementIsVisible(driver.findElement(By.id(selector))));
|
||||
return element;
|
||||
}
|
||||
|
||||
function waitForTransition(duration) {
|
||||
return new Promise(resolve => {
|
||||
setTimeout(resolve, duration);
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
getElement: getElement,
|
||||
waitForTransition: waitForTransition,
|
||||
waitAndGetElementById: waitAndGetElementById
|
||||
}
|
||||
Reference in New Issue
Block a user