Cold-Air-Networks/mirror-speedometer
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Page object (#23)

Browse source 
Goal: Add a fixed interface to interact with test frames and their DOM nodes.
This will allow us to run more complex scenarios in the future without sacrificing flexibility or performance for the existing tests.

- Add `Page` object
- Refactor tests to interact with the frame only through the Page object
This commit is contained in:
Camillo Bruni 2022-11-22 13:59:43 +01:00 committed by GitHub
parent 52998e962d
commit e1125d91bc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 250 additions and 231 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

112
resources/benchmark-runner.mjs
View file

@ -6,23 +6,27 @@ export class BenchmarkTestStep {
}
class BenchmarkState {
constructor(suites) {
constructor(suites)
{
this._suites = suites;
this._suiteIndex = -1;
this._testIndex = 0;
this.next();
}
currentSuite() {
currentSuite()
{
return this._suites[this._suiteIndex];
}
currentTest() {
currentTest()
{
const suite = this.currentSuite();
return suite ? suite.tests[this._testIndex] : null;
}
next() {
next()
{
this._testIndex++;
const suite = this._suites[this._suiteIndex];
@ -37,55 +41,94 @@ class BenchmarkState {
return this;
}
isFirstTest() {
isFirstTest()
{
return !this._testIndex;
}
prepareCurrentSuite(runner, frame) {
prepareCurrentSuite(page)
{
const suite = this.currentSuite();
return new Promise((resolve) => {
const frame = page._frame;
frame.onload = () => {
suite.prepare(runner, frame.contentWindow, frame.contentDocument).then(resolve);
suite.prepare(page).then(resolve);
}
frame.src = 'resources/' + suite.url;
});
}
}
export class BenchmarkRunner {
constructor(suites, client) {
this._suites = suites;
this._prepareReturnValue = null;
this._client = client;
class Page {
constructor(frame)
{
this._frame = frame;
}
waitForElement(selector) {
waitForElement(selector)
{
return new Promise((resolve) => {
const contentDocument = this._frame.contentDocument;
function resolveIfReady() {
const element = contentDocument.querySelector(selector);
const resolveIfReady = () => {
const element = this.querySelector(selector);
if (element) {
window.requestAnimationFrame(function () {
window.requestAnimationFrame(() => {
return resolve(element);
});
return;
} else {
setTimeout(resolveIfReady, 50);
}
setTimeout(resolveIfReady, 50);
}
};
resolveIfReady();
});
}
_removeFrame() {
querySelector(selector)
{
return this._frame.contentDocument.querySelector(selector);
}
querySelectorAll(selector)
{
return this._frame.contentDocument.querySelectorAll(selector);
}
getElementById(id)
{
return this._frame.contentDocument.getElementById(id);
}
triggerEnter(element, type)
{
const ENTER_KEY_CODE = 13;
const event = document.createEvent('Events');
event.initEvent(type, true, true);
event.keyCode = ENTER_KEY_CODE;
event.which = ENTER_KEY_CODE;
event.key = 'ENTER';
element.dispatchEvent(event);
}
}
export class BenchmarkRunner {
constructor(suites, client)
{
this._suites = suites;
this._client = client;
this._page = null;
}
_removeFrame()
{
if (this._frame) {
this._frame.parentNode.removeChild(this._frame);
this._frame = null;
}
}
_appendFrame(src) {
_appendFrame(src)
{
const frame = document.createElement('iframe');
frame.style.width = '800px';
frame.style.height = '600px';
@ -111,23 +154,21 @@ export class BenchmarkRunner {
return frame;
}
_writeMark(name) {
_writeMark(name)
{
if (window.performance && window.performance.mark)
window.performance.mark(name);
}
// This function ought be as simple as possible. Don't even use Promise.
_runTest(suite, test, prepareReturnValue, callback)
_runTest(suite, test, page, callback)
{
const self = this;
const now = window.performance && window.performance.now ? () => window.performance.now() : Date.now;
const contentWindow = self._frame.contentWindow;
const contentDocument = self._frame.contentDocument;
self._writeMark(suite.name + '.' + test.name + '-start');
let startTime = now();
test.run(prepareReturnValue, contentWindow, contentDocument);
test.run(page);
let endTime = now();
self._writeMark(suite.name + '.' + test.name + '-sync-end');
@ -161,11 +202,10 @@ export class BenchmarkRunner {
if (state.isFirstTest()) {
this._removeFrame();
let self = this;
return state.prepareCurrentSuite(this, this._appendFrame()).then(prepareReturnValue => {
self._prepareReturnValue = prepareReturnValue;
return self._runTestAndRecordResults(state);
});
this._appendFrame();
this._page = new Page(this._frame);
return state.prepareCurrentSuite(this._page).then(
() => this._runTestAndRecordResults(state))
}
return this._runTestAndRecordResults(state);
@ -206,7 +246,7 @@ export class BenchmarkRunner {
this._client.willRunTest(suite, test);
setTimeout(() => {
this._runTest(suite, test, this._prepareReturnValue, (syncTime, asyncTime) => {
this._runTest(suite, test, this._page, (syncTime, asyncTime) => {
const suiteResults = this._measuredValues.tests[suite.name] || {tests:{}, total: 0};
const total = syncTime + asyncTime;
this._measuredValues.tests[suite.name] = suiteResults;

369
resources/tests.mjs
View file

@ -4,39 +4,28 @@ const numberOfItemsToAdd = 100;
export const Suites = [];
const ENTER_KEY_CODE = 13;
let triggerEnter = function (element, type) {
const event = document.createEvent('Events');
event.initEvent(type, true, true);
event.keyCode = ENTER_KEY_CODE;
event.which = ENTER_KEY_CODE;
event.key = 'ENTER';
element.dispatchEvent(event);
}
Suites.push({
name: 'VanillaJS-TodoMVC',
url: 'todomvc/vanilla-examples/vanillajs/index.html',
prepare(runner, contentWindow, contentDocument) {
return runner.waitForElement('.new-todo').then(element => {
element.focus();
return element;
});
async prepare(page) {
(await page.waitForElement('.new-todo')).focus();
},
tests: [
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', (newTodo, contentWindow, contentDocument) => {
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', page => {
const newTodo = page.querySelector(".new-todo");
for (let i = 0; i < numberOfItemsToAdd; i++) {
newTodo.value = 'Something to do ' + i;
newTodo.dispatchEvent(new Event('change'));
triggerEnter(newTodo, 'keypress');
page.triggerEnter(newTodo, 'keypress');
}
}),
new BenchmarkTestStep('CompletingAllItems', (newTodo, contentWindow, contentDocument) => {
const checkboxes = contentDocument.querySelectorAll('.toggle');
new BenchmarkTestStep('CompletingAllItems', page => {
const checkboxes = page.querySelectorAll('.toggle');
for (let i = 0; i < checkboxes.length; i++)
checkboxes[i].click();
}),
new BenchmarkTestStep('DeletingAllItems', (newTodo, contentWindow, contentDocument) => {
const deleteButtons = contentDocument.querySelectorAll('.destroy');
new BenchmarkTestStep('DeletingAllItems', page => {
const deleteButtons = page.querySelectorAll('.destroy');
for (let i = 0; i < deleteButtons.length; i++)
deleteButtons[i].click();
}),
@ -46,27 +35,26 @@ Suites.push({
Suites.push({
name: 'Vanilla-ES2015-TodoMVC',
url: 'todomvc/vanilla-examples/es2015/index.html',
prepare(runner, contentWindow, contentDocument) {
return runner.waitForElement('.new-todo').then((element) => {
element.focus();
return element;
});
async prepare(page) {
const element = await page.waitForElement('.new-todo');
element.focus();
},
tests: [
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', (newTodo, contentWindow, contentDocument) => {
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', page => {
const newTodo = page.querySelector(".new-todo");
for (let i = 0; i < numberOfItemsToAdd; i++) {
newTodo.value = 'Something to do ' + i;
newTodo.dispatchEvent(new Event('change'));
triggerEnter(newTodo, 'keypress');
page.triggerEnter(newTodo, 'keypress');
}
}),
new BenchmarkTestStep('CompletingAllItems', (params, contentWindow, contentDocument) => {
const checkboxes = contentDocument.querySelectorAll('.toggle');
new BenchmarkTestStep('CompletingAllItems', page => {
const checkboxes = page.querySelectorAll('.toggle');
for (let i = 0; i < checkboxes.length; i++)
checkboxes[i].click();
}),
new BenchmarkTestStep('DeletingItems', (params, contentWindow, contentDocument) => {
const deleteButtons = contentDocument.querySelectorAll('.destroy');
new BenchmarkTestStep('DeletingItems', page => {
const deleteButtons = page.querySelectorAll('.destroy');
for (let i = 0; i < deleteButtons.length; i++)
deleteButtons[i].click();
}),
@ -76,27 +64,26 @@ Suites.push({
Suites.push({
name: 'Vanilla-ES2015-Babel-Webpack-TodoMVC',
url: 'todomvc/vanilla-examples/es2015-babel-webpack/dist/index.html',
prepare(runner, contentWindow, contentDocument) {
return runner.waitForElement('.new-todo').then(element => {
element.focus();
return element;
});
async prepare(page) {
const element = await page.waitForElement('.new-todo');
element.focus();
},
tests: [
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', (newTodo, contentWindow, contentDocument) => {
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', page => {
const newTodo = page.querySelector(".new-todo");
for (let i = 0; i < numberOfItemsToAdd; i++) {
newTodo.value = 'Something to do ' + i;
newTodo.dispatchEvent(new Event('change'));
triggerEnter(newTodo, 'keypress');
page.triggerEnter(newTodo, 'keypress');
}
}),
new BenchmarkTestStep('CompletingAllItems', (params, contentWindow, contentDocument) => {
const checkboxes = contentDocument.querySelectorAll('.toggle');
new BenchmarkTestStep('CompletingAllItems', page => {
const checkboxes = page.querySelectorAll('.toggle');
for (let i = 0; i < checkboxes.length; i++)
checkboxes[i].click();
}),
new BenchmarkTestStep('DeletingItems', (params, contentWindow, contentDocument) => {
const deleteButtons = contentDocument.querySelectorAll('.destroy');
new BenchmarkTestStep('DeletingItems', page => {
const deleteButtons = page.querySelectorAll('.destroy');
for (let i = 0; i < deleteButtons.length; i++)
deleteButtons[i].click();
}),
@ -106,31 +93,31 @@ Suites.push({
Suites.push({
name: 'React-TodoMVC',
url: 'todomvc/architecture-examples/react/index.html',
prepare(runner, contentWindow, contentDocument) {
contentWindow.app.Utils.store = () => {};
return runner.waitForElement('.new-todo').then(element => {
element.focus();
return element;
});
async prepare(page) {
// FIXME: Move this custom code to the react app.
page._frame.contentWindow.app.Utils.store = () => {};
const element = await page.waitForElement('.new-todo');
element.focus();
},
tests: [
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', (newTodo, contentWindow, contentDocument) => {
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', page => {
const newTodo = page.querySelector(".new-todo");
for (let i = 0; i < numberOfItemsToAdd; i++) {
newTodo.value = 'Something to do ' + i;
newTodo.dispatchEvent(new Event('input', {
bubbles: true,
cancelable: true
}));
triggerEnter(newTodo, 'keydown');
page.triggerEnter(newTodo, 'keydown');
}
}),
new BenchmarkTestStep('CompletingAllItems', (newTodo, contentWindow, contentDocument) => {
const checkboxes = contentDocument.querySelectorAll('.toggle');
new BenchmarkTestStep('CompletingAllItems', page => {
const checkboxes = page.querySelectorAll('.toggle');
for (let i = 0; i < checkboxes.length; i++)
checkboxes[i].click();
}),
new BenchmarkTestStep('DeletingAllItems', (newTodo, contentWindow, contentDocument) => {
const deleteButtons = contentDocument.querySelectorAll('.destroy');
new BenchmarkTestStep('DeletingAllItems', page => {
const deleteButtons = page.querySelectorAll('.destroy');
for (let i = 0; i < deleteButtons.length; i++)
deleteButtons[i].click();
}),
@ -140,26 +127,25 @@ Suites.push({
Suites.push({
name: 'React-Redux-TodoMVC',
url: 'todomvc/architecture-examples/react-redux/dist/index.html',
prepare(runner, contentWindow, contentDocument) {
return runner.waitForElement('.new-todo').then(element => {
element.focus();
return element;
});
async prepare(page) {
const element = await page.waitForElement('.new-todo');
element.focus();
},
tests: [
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', (newTodo, contentWindow, contentDocument) => {
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', page => {
const newTodo = page.querySelector(".new-todo");
for (let i = 0; i < numberOfItemsToAdd; i++) {
newTodo.value = 'Something to do ' + i;
triggerEnter(newTodo, 'keydown');
page.triggerEnter(newTodo, 'keydown');
}
}),
new BenchmarkTestStep('CompletingAllItems', (params, contentWindow, contentDocument) => {
const checkboxes = contentDocument.querySelectorAll('.toggle');
new BenchmarkTestStep('CompletingAllItems', page => {
const checkboxes = page.querySelectorAll('.toggle');
for (let i = 0; i < checkboxes.length; i++)
checkboxes[i].click();
}),
new BenchmarkTestStep('DeletingItems', (params, contentWindow, contentDocument) => {
const deleteButtons = contentDocument.querySelectorAll('.destroy');
new BenchmarkTestStep('DeletingItems', page => {
const deleteButtons = page.querySelectorAll('.destroy');
for (let i = 0; i < deleteButtons.length; i++)
deleteButtons[i].click();
}),
@ -169,26 +155,25 @@ Suites.push({
Suites.push({
name: 'EmberJS-TodoMVC',
url: 'todomvc/architecture-examples/emberjs/dist/index.html',
prepare(runner, contentWindow, contentDocument) {
return runner.waitForElement('#new-todo').then(element => {
element.focus();
return element;
});
async prepare(page) {
const element = await page.waitForElement('.new-todo');
element.focus();
},
tests: [
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', (newTodo, contentWindow, contentDocument) => {
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', page => {
const newTodo = page.querySelector(".new-todo");
for (let i = 0; i < numberOfItemsToAdd; i++) {
newTodo.value = 'Something to do ' + i;
triggerEnter(newTodo, 'keydown');
page.triggerEnter(newTodo, 'keydown');
}
}),
new BenchmarkTestStep('CompletingAllItems', (params, contentWindow, contentDocument) => {
const checkboxes = contentDocument.querySelectorAll('.toggle');
new BenchmarkTestStep('CompletingAllItems', page => {
const checkboxes = page.querySelectorAll('.toggle');
for (let i = 0; i < checkboxes.length; i++)
checkboxes[i].click();
}),
new BenchmarkTestStep('DeletingItems', (params, contentWindow, contentDocument) => {
const deleteButtons = contentDocument.querySelectorAll('.destroy');
new BenchmarkTestStep('DeletingItems', page => {
const deleteButtons = page.querySelectorAll('.destroy');
for (let i = 0; i < deleteButtons.length; i++)
deleteButtons[i].click();
}),
@ -198,26 +183,25 @@ Suites.push({
Suites.push({
name: 'EmberJS-Debug-TodoMVC',
url: 'todomvc/architecture-examples/emberjs-debug/index.html',
prepare(runner, contentWindow, contentDocument) {
return runner.waitForElement('#new-todo').then(element => {
element.focus();
return element;
});
async prepare(page) {
const element = await page.waitForElement('#new-todo');
element.focus();
},
tests: [
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', (newTodo, contentWindow, contentDocument) => {
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', page => {
const newTodo = page.getElementById("new-todo");
for (let i = 0; i < numberOfItemsToAdd; i++) {
newTodo.value = 'Something to do ' + i;
triggerEnter(newTodo, 'keydown');
page.triggerEnter(newTodo, 'keydown');
}
}),
new BenchmarkTestStep('CompletingAllItems', (params, contentWindow, contentDocument) => {
const checkboxes = contentDocument.querySelectorAll('.toggle');
new BenchmarkTestStep('CompletingAllItems', page => {
const checkboxes = page.querySelectorAll('.toggle');
for (let i = 0; i < checkboxes.length; i++)
checkboxes[i].click();
}),
new BenchmarkTestStep('DeletingItems', (params, contentWindow, contentDocument) => {
const deleteButtons = contentDocument.querySelectorAll('.destroy');
new BenchmarkTestStep('DeletingItems', page => {
const deleteButtons = page.querySelectorAll('.destroy');
for (let i = 0; i < deleteButtons.length; i++)
deleteButtons[i].click();
}),
@ -227,28 +211,28 @@ Suites.push({
Suites.push({
name: 'BackboneJS-TodoMVC',
url: 'todomvc/architecture-examples/backbone/index.html',
prepare(runner, contentWindow, contentDocument) {
contentWindow.Backbone.sync = () => {};
return runner.waitForElement('#appIsReady').then(element => {
const newTodo = contentDocument.querySelector('.new-todo');
newTodo.focus();
return newTodo;
});
async prepare(page) {
// FIXME: Move this custom code to the backboneJS app.
page._frame.contentWindow.Backbone.sync = () => {};
await page.waitForElement('#appIsReady');
const newTodo = page.querySelector('.new-todo');
newTodo.focus();
},
tests: [
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', (newTodo, contentWindow, contentDocument) => {
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', page => {
const newTodo = page.querySelector(".new-todo");
for (let i = 0; i < numberOfItemsToAdd; i++) {
newTodo.value = 'Something to do ' + i;
triggerEnter(newTodo, 'keypress');
page.triggerEnter(newTodo, 'keypress');
}
}),
new BenchmarkTestStep('CompletingAllItems', (newTodo, contentWindow, contentDocument) => {
const checkboxes = contentDocument.querySelectorAll('.toggle');
new BenchmarkTestStep('CompletingAllItems', page => {
const checkboxes = page.querySelectorAll('.toggle');
for (let i = 0; i < numberOfItemsToAdd; i++)
checkboxes[i].click();
}),
new BenchmarkTestStep('DeletingAllItems', (newTodo, contentWindow, contentDocument) => {
const deleteButtons = contentDocument.querySelectorAll('.destroy');
new BenchmarkTestStep('DeletingAllItems', page => {
const deleteButtons = page.querySelectorAll('.destroy');
for (let i = 0; i < numberOfItemsToAdd; i++)
deleteButtons[i].click();
}),
@ -258,32 +242,31 @@ Suites.push({
Suites.push({
name: 'AngularJS-TodoMVC',
url: 'todomvc/architecture-examples/angularjs/index.html',
prepare(runner, contentWindow, contentDocument) {
return runner.waitForElement('#new-todo').then(element => {
element.focus();
return element;
});
async prepare(page) {
const element = await page.waitForElement('#new-todo');
element.focus();
},
tests: [
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', (newTodo, contentWindow, contentDocument) => {
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', page => {
const submitEvent = document.createEvent('Event');
submitEvent.initEvent('submit', true, true);
const inputEvent = document.createEvent('Event');
inputEvent.initEvent('input', true, true);
const newTodo = page.querySelector(".new-todo");
for (let i = 0; i < numberOfItemsToAdd; i++) {
newTodo.value = 'Something to do ' + i;
newTodo.dispatchEvent(inputEvent);
newTodo.form.dispatchEvent(submitEvent);
}
}),
new BenchmarkTestStep('CompletingAllItems', (newTodo, contentWindow, contentDocument) => {
const checkboxes = contentDocument.querySelectorAll('.toggle');
new BenchmarkTestStep('CompletingAllItems', page => {
const checkboxes = page.querySelectorAll('.toggle');
for (let i = 0; i < checkboxes.length; i++)
checkboxes[i].click();
}),
new BenchmarkTestStep('DeletingAllItems', (newTodo, contentWindow, contentDocument) => {
new BenchmarkTestStep('DeletingAllItems', page => {
for (let i = 0; i < numberOfItemsToAdd; i++)
contentDocument.querySelector('.destroy').click();
page.querySelector('.destroy').click();
}),
]
});
@ -291,30 +274,29 @@ Suites.push({
Suites.push({
name: 'Angular2-TypeScript-TodoMVC',
url: 'todomvc/architecture-examples/angular/dist/index.html',
prepare(runner, contentWindow, contentDocument) {
return runner.waitForElement('.new-todo').then(element => {
element.focus();
return element;
});
async prepare(page) {
const element = await page.waitForElement('.new-todo');
element.focus();
},
tests: [
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', (newTodo, contentWindow, contentDocument) => {
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', page => {
const newTodo = page.querySelector(".new-todo");
for (let i = 0; i < numberOfItemsToAdd; i++) {
newTodo.value = 'Something to do ' + i;
newTodo.dispatchEvent(new Event('input', {
bubbles: true,
cancelable: true
}));
triggerEnter(newTodo, 'keyup');
page.triggerEnter(newTodo, 'keyup');
}
}),
new BenchmarkTestStep('CompletingAllItems', (params, contentWindow, contentDocument) => {
const checkboxes = contentDocument.querySelectorAll('.toggle');
new BenchmarkTestStep('CompletingAllItems', page => {
const checkboxes = page.querySelectorAll('.toggle');
for (let i = 0; i < checkboxes.length; i++)
checkboxes[i].click();
}),
new BenchmarkTestStep('DeletingItems', (params, contentWindow, contentDocument) => {
const deleteButtons = contentDocument.querySelectorAll('.destroy');
new BenchmarkTestStep('DeletingItems', page => {
const deleteButtons = page.querySelectorAll('.destroy');
for (let i = 0; i < deleteButtons.length; i++)
deleteButtons[i].click();
}),
@ -324,30 +306,29 @@ Suites.push({
Suites.push({
name: 'VueJS-TodoMVC',
url: 'todomvc/architecture-examples/vuejs-cli/dist/index.html',
prepare(runner, contentWindow, contentDocument) {
return runner.waitForElement('.new-todo').then(element => {
element.focus();
return element;
});
async prepare(page) {
const element = await page.waitForElement('.new-todo');
element.focus();
},
tests: [
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', (newTodo, contentWindow, contentDocument) => {
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', page => {
const newTodo = page.querySelector(".new-todo");
for (let i = 0; i < numberOfItemsToAdd; i++) {
newTodo.value = 'Something to do ' + i;
newTodo.dispatchEvent(new Event('input', {
bubbles: true,
cancelable: true
}));
triggerEnter(newTodo, 'keyup');
page.triggerEnter(newTodo, 'keyup');
}
}),
new BenchmarkTestStep('CompletingAllItems', (newTodo, contentWindow, contentDocument) => {
const checkboxes = contentDocument.querySelectorAll('.toggle');
new BenchmarkTestStep('CompletingAllItems', page => {
const checkboxes = page.querySelectorAll('.toggle');
for (let i = 0; i < checkboxes.length; i++)
checkboxes[i].click();
}),
new BenchmarkTestStep('DeletingAllItems', (newTodo, contentWindow, contentDocument) => {
const deleteButtons = contentDocument.querySelectorAll('.destroy');
new BenchmarkTestStep('DeletingAllItems', page => {
const deleteButtons = page.querySelectorAll('.destroy');
for (let i = 0; i < deleteButtons.length; i++)
deleteButtons[i].click();
}),
@ -357,28 +338,27 @@ Suites.push({
Suites.push({
name: 'jQuery-TodoMVC',
url: 'todomvc/architecture-examples/jquery/index.html',
prepare(runner, contentWindow, contentDocument) {
return runner.waitForElement('#appIsReady').then(element => {
const newTodo = contentDocument.getElementById('new-todo');
newTodo.focus();
return newTodo;
});
async prepare(page) {
await page.waitForElement('#appIsReady');
const newTodo = page.getElementById('new-todo');
newTodo.focus();
},
tests: [
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', (newTodo, contentWindow, contentDocument) => {
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', page => {
const newTodo = page.querySelector(".new-todo");
for (let i = 0; i < numberOfItemsToAdd; i++) {
newTodo.value = 'Something to do ' + i;
triggerEnter(newTodo, 'keyup');
page.triggerEnter(newTodo, 'keyup');
}
}),
new BenchmarkTestStep('CompletingAllItems', (newTodo, contentWindow, contentDocument) => {
const checkboxes = contentDocument.getElementsByClassName('toggle');
new BenchmarkTestStep('CompletingAllItems', page => {
const checkboxes = page.querySelectorAll('.toggle');
for (let i = 0; i < checkboxes.length; i++)
checkboxes[i].click();
}),
new BenchmarkTestStep('DeletingAllItems', (newTodo, contentWindow, contentDocument) => {
new BenchmarkTestStep('DeletingAllItems', page => {
for (let i = 0; i < numberOfItemsToAdd; i++)
contentDocument.querySelector('.destroy').click();
page.querySelector('.destroy').click();
}),
]
})
@ -386,26 +366,25 @@ Suites.push({
Suites.push({
name: 'Preact-TodoMVC',
url: 'todomvc/architecture-examples/preact/dist/index.html',
prepare(runner, contentWindow, contentDocument) {
return runner.waitForElement('.new-todo').then(element => {
element.focus();
return element;
});
async prepare(page) {
const element = await page.waitForElement('.new-todo');
element.focus();
},
tests: [
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', (newTodo, contentWindow, contentDocument) => {
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', page => {
const newTodo = page.querySelector(".new-todo");
for (let i = 0; i < numberOfItemsToAdd; i++) {
newTodo.value = 'Something to do ' + i;
triggerEnter(newTodo, 'keydown');
page.triggerEnter(newTodo, 'keydown');
}
}),
new BenchmarkTestStep('CompletingAllItems', (params, contentWindow, contentDocument) => {
const checkboxes = contentDocument.querySelectorAll('.toggle');
new BenchmarkTestStep('CompletingAllItems', page => {
const checkboxes = page.querySelectorAll('.toggle');
for (let i = 0; i < checkboxes.length; i++)
checkboxes[i].click();
}),
new BenchmarkTestStep('DeletingItems', (params, contentWindow, contentDocument) => {
const deleteButtons = contentDocument.querySelectorAll('.destroy');
new BenchmarkTestStep('DeletingItems', page => {
const deleteButtons = page.querySelectorAll('.destroy');
for (let i = 0; i < deleteButtons.length; i++)
deleteButtons[i].click();
}),
@ -415,37 +394,39 @@ Suites.push({
Suites.push({
name: 'Inferno-TodoMVC',
url: 'todomvc/architecture-examples/inferno/index.html',
prepare(runner, contentWindow, contentDocument) {
return runner.waitForElement('.new-todo').then(element => {
element.focus();
return element;
});
async prepare(page) {
const element = await page.waitForElement('.new-todo');
element.focus();
},
tests: [
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', (newTodo, contentWindow, contentDocument) => {
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', page => {
const newTodo = page.querySelector(".new-todo");
for (let i = 0; i < numberOfItemsToAdd; i++) {
newTodo.value = 'Something to do ' + i;
newTodo.dispatchEvent(new Event('change', {
bubbles: true,
cancelable: true
}));
triggerEnter(newTodo, 'keydown');
page.triggerEnter(newTodo, 'keydown');
}
}),
new BenchmarkTestStep('CompletingAllItems', (params, contentWindow, contentDocument) => {
const checkboxes = contentDocument.querySelectorAll('.toggle');
new BenchmarkTestStep('CompletingAllItems', page => {
const checkboxes = page.querySelectorAll('.toggle');
for (let i = 0; i < checkboxes.length; i++)
checkboxes[i].click();
}),
new BenchmarkTestStep('DeletingItems', (params, contentWindow, contentDocument) => {
const deleteButtons = contentDocument.querySelectorAll('.destroy');
new BenchmarkTestStep('DeletingItems', page => {
const deleteButtons = page.querySelectorAll('.destroy');
for (let i = 0; i < numberOfItemsToAdd; i++)
contentDocument.querySelector('.destroy').click();
page.querySelector('.destroy').click();
}),
]
});
function processElmWorkQueue(contentWindow) {
function processElmWorkQueue(page)
{
// FIXME: Move code to the Elm app itself.
const contentWindow = page._frame.contentWindow;
contentWindow.elmWork();
const callbacks = contentWindow.rAFCallbackList;
let i = 0;
@ -459,36 +440,35 @@ function processElmWorkQueue(contentWindow) {
Suites.push({
name: 'Elm-TodoMVC',
url: 'todomvc/functional-prog-examples/elm/index.html',
prepare(runner, contentWindow, contentDocument) {
return runner.waitForElement('.new-todo').then(element => {
element.focus();
return element;
});
async prepare(page) {
const element = await page.waitForElement('.new-todo');
element.focus();
},
tests: [
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', (newTodo, contentWindow, contentDocument) => {
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', page => {
const newTodo = page.querySelector(".new-todo");
for (let i = 0; i < numberOfItemsToAdd; i++) {
newTodo.value = 'Something to do ' + i;
newTodo.dispatchEvent(new Event('input', {
bubbles: true,
cancelable: true
}));
processElmWorkQueue(contentWindow);
triggerEnter(newTodo, 'keydown');
processElmWorkQueue(contentWindow);
processElmWorkQueue(page);
page.triggerEnter(newTodo, 'keydown');
processElmWorkQueue(page);
}
}),
new BenchmarkTestStep('CompletingAllItems', (params, contentWindow, contentDocument) => {
let checkboxes = contentDocument.querySelectorAll('.toggle');
new BenchmarkTestStep('CompletingAllItems', page => {
let checkboxes = page.querySelectorAll('.toggle');
for (let i = 0; i < checkboxes.length; i++) {
checkboxes[i].click();
processElmWorkQueue(contentWindow);
processElmWorkQueue(page);
}
}),
new BenchmarkTestStep('DeletingItems', (params, contentWindow, contentDocument) => {
new BenchmarkTestStep('DeletingItems', page => {
for (let i = 0; i < numberOfItemsToAdd; i++) {
contentDocument.querySelector('.destroy').click();
processElmWorkQueue(contentWindow);
page.querySelector('.destroy').click();
processElmWorkQueue(page);
}
}),
]
@ -497,27 +477,26 @@ Suites.push({
Suites.push({
name: 'Flight-TodoMVC',
url: 'todomvc/dependency-examples/flight/flight/index.html',
prepare(runner, contentWindow, contentDocument) {
return runner.waitForElement('#appIsReady').then(element => {
const newTodo = contentDocument.getElementById('new-todo');
newTodo.focus();
return newTodo;
});
async prepare(page) {
await page.waitForElement('#appIsReady');
const newTodo = page.getElementById('new-todo');
newTodo.focus();
},
tests: [
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', (newTodo, contentWindow, contentDocument) => {
new BenchmarkTestStep('Adding' + numberOfItemsToAdd + 'Items', page => {
const newTodo = page.getElementById("new-todo");
for (let i = 0; i < numberOfItemsToAdd; i++) {
newTodo.value = 'Something to do ' + i;
triggerEnter(newTodo, 'keydown');
page.triggerEnter(newTodo, 'keydown');
}
}),
new BenchmarkTestStep('CompletingAllItems', (params, contentWindow, contentDocument) => {
let checkboxes = contentDocument.querySelectorAll('.toggle');
new BenchmarkTestStep('CompletingAllItems', page => {
let checkboxes = page.querySelectorAll('.toggle');
for (let i = 0; i < checkboxes.length; i++)
checkboxes[i].click();
}),
new BenchmarkTestStep('DeletingItems', (params, contentWindow, contentDocument) => {
let deleteButtons = contentDocument.querySelectorAll('.destroy');
new BenchmarkTestStep('DeletingItems', page => {
let deleteButtons = page.querySelectorAll('.destroy');
for (let i = 0; i < deleteButtons.length; i++)
deleteButtons[i].click();
}),