Skip to content
This repository has been archived by the owner on Dec 25, 2021. It is now read-only.

Headless test using puppeteer #13

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
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
11 changes: 9 additions & 2 deletions .eslintrc
Original file line number Diff line number Diff line change
@@ -1,13 +1,20 @@
{
"env": {
"browser": true,
"es6": true
"es6": true,
"node": true
},
"extends": [
"eslint:recommended",
"google"
],
"rules": {
"no-var": 0,
"no-var": 0
samarpanda marked this conversation as resolved.
Show resolved Hide resolved
},
"parserOptions": {
"ecmaVersion": 8
},
"globals": {
"perfMetrics": true
}
}
3 changes: 3 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
language: node_js
node_js:
- 10.13.0
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# First Input Delay
# First Input Delay [![Build Status](https://travis-ci.org/GoogleChromeLabs/first-input-delay.svg?branch=master)](https://travis-ci.org/GoogleChromeLabs/first-input-delay)

A JavaScript library for measuring [First Input Delay (FID)](https://developers.google.com/web/updates/2018/05/first-input-delay) in the browser. See [the article](https://developers.google.com/web/updates/2018/05/first-input-delay) for a detailed metric description and explanation.

Expand Down
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 4 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,13 @@
"devDependencies": {
"eslint": "^4.19.1",
"eslint-config-google": "^0.9.1",
"puppeteer": "^1.11.0",
"terser": "^3.8.2"
},
"scripts": {
"test": "eslint src",
"test": "npm run lint && npm run puppeteer",
"puppeteer": "node tests/puppeteer.js",
"lint": "eslint src",
"build": "terser -c -m -o dist/first-input-delay.min.js src/first-input-delay.js"
},
"repository": {
Expand Down
82 changes: 82 additions & 0 deletions tests/puppeteer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
const server = require('./server');
const puppeteer = require('puppeteer');
const assert = require('assert');
const PORT = 8080;
let i = 0;

/**
* Puppeteer init method
* @param {function} callback
*/
async function init(callback) {
const browser = await puppeteer.launch({});
for (i of [0, 1, 2, 3]) {
await openPage(browser);
}
await browser.close();
callback();
}

/**
* Open url in browser
* @param {*} browser
*/
async function openPage(browser) {
const page = await browser.newPage();
await page.goto(`http://localhost:${PORT}`, {
waitUntil: 'networkidle0',
});
const result = await page.evaluate(inputDelayHandler, i);
assert(result, `Got input delay value as ${result} for mousedown`);
await page.close();
}

/**
* FID value is returned
* @param {number} i
* @return {number} FID value is returned
*/
function inputDelayHandler(i) {
return new Promise((resolve, reject) => {
perfMetrics.onFirstInputDelay(function(delay, event) {
resolve(delay);
});
const eventsArr = [
() => {
let mEvent = document.createEvent('MouseEvents');
mEvent.initMouseEvent('touchstart', true, true, window);
document.body.dispatchEvent(mEvent);
},
() => {
let mEvent = document.createEvent('MouseEvents');
mEvent.initMouseEvent('click', true, true, window);
document.body.dispatchEvent(mEvent);
},
() => {
let mEvent = document.createEvent('MouseEvents');
mEvent.initMouseEvent('mousedown', true, true, window);
document.body.dispatchEvent(mEvent);
},
() => {
let kEvent = document.createEvent('KeyboardEvent');
kEvent.initKeyboardEvent(
'keydown', true, true, window, false, false, false, false, 40, 0
);
document.body.dispatchEvent(kEvent);
},
];
eventsArr[i]();

/**
* Page timeout
*/
setTimeout(() => {
reject(false);
}, 1000);
});
}

server.start(PORT);
init(() => {
server.stop();
});
35 changes: 35 additions & 0 deletions tests/server.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
let http = require('http');
let fs = require('fs');
let fidScript;
let indexHtml;

fidScript = fs.readFileSync('./src/first-input-delay.js', 'utf8');

indexHtml = `
<html>
<head>
<title>FID Page</title>
<script>${fidScript}</script>
</head>
<h1>FID</h1>
<p>First Input Delay</p>
<span id="link1">Some link</span>
</html>`;

let server = http.createServer((req, res) => {
res.setHeader('content-type', 'text/html');
res.writeHead(200, {'Content-Type': 'text/html'});
res.end(indexHtml);
});

server.on('close', () => {
process.exit();
});

module.exports.start = (port) => {
server.listen(port);
};

module.exports.stop = () => {
server.close();
};
Loading