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.

Sign up for GitHub

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

webvital to test #139

Closed
wants to merge 4 commits into from
Closed

webvital to test #139

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
eee8c39
webvital to test
May 28, 2024
57cd905
kjh
May 29, 2024
7f00e71
TEST
May 31, 2024
2b68424
wv added
May 31, 2024
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
35 changes: 23 additions & 12 deletions protractor.saucelabs.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,34 @@
exports.config = {
specs: ['test/e2e/**/*.spec.js'],
// TODO: disable webvital tests for saucelab for now, since browsers in saucelab seems never return webvital metrics
exclude: ['test/e2e/12_webvitalsAsCustomEvent/*.spec.js'],
// exclude: ['test/e2e/12_webvitalsAsCustomEvent/*.spec.js'],
sauceUser: process.env.SAUCE_USERNAME,
sauceKey: process.env.SAUCE_ACCESS_KEY,
sauceBuild: process.env.GITHUB_RUN_NUMBER,
// See https://wiki.saucelabs.com/display/DOCS/Platform+Configurator#/
multiCapabilities: [
newSaucelabsCapability('internet explorer', '11.103', 'Windows 10'),
newSaucelabsCapability('MicrosoftEdge', '14.14393', 'Windows 10'),
newSaucelabsCapability('safari', '9.0', 'OS X 10.11'),
newSaucelabsCapability('safari', '10.1', 'macOS 10.12'),
newSaucelabsCapability('safari', '11.0', 'macOS 10.12'),
newSaucelabsCapability('safari', '11.1', 'macOS 10.13'),
newSaucelabsCapability('firefox', '78.0', 'Windows 7'),
newSaucelabsCapability('firefox', '58.0', 'Windows 11'),
newSaucelabsCapability('chrome', '67.0', 'Windows 10'),
newSaucelabsCapability('chrome', '54.0', 'OS X 10.11'),
newSaucelabsCapability('chrome', '65.0', 'OS X 10.11')
// newSaucelabsCapability('internet explorer', '11.103', 'Windows 10'),
// newSaucelabsCapability('MicrosoftEdge', '14.14393', 'Windows 10'),
// newSaucelabsCapability('safari', '9.0', 'OS X 10.11'),
// newSaucelabsCapability('safari', '10.1', 'macOS 10.12'),
// newSaucelabsCapability('safari', '11.0', 'macOS 10.12'),
// newSaucelabsCapability('safari', '11.1', 'macOS 10.13'),
// newSaucelabsCapability('firefox', '78.0', 'Windows 7'),
// newSaucelabsCapability('firefox', '58.0', 'Windows 11'),
// newSaucelabsCapability('chrome', '67.0', 'Windows 10'),
// newSaucelabsCapability('chrome', '54.0', 'OS X 10.11'),
// newSaucelabsCapability('chrome', '65.0', 'OS X 10.11'),
newSaucelabsCapability('chrome', '77.0', 'Windows 10'),
newSaucelabsCapability('chrome', '78.0', 'Windows 10'),
newSaucelabsCapability('chrome', '79.0', 'Windows 10'),
newSaucelabsCapability('MicrosoftEdge', '79.0', 'Windows 10'),
newSaucelabsCapability('MicrosoftEdge', '80.0', 'Windows 10'),
newSaucelabsCapability('firefox', '122.0', 'Windows 11'),
newSaucelabsCapability('firefox', '123.0', 'Windows 11'),
newSaucelabsCapability('chrome', '76.0', 'Windows 10'),
newSaucelabsCapability('firefox', '89.0', 'Windows 11'),
newSaucelabsCapability('chrome', '96.0', 'Windows 10'),
newSaucelabsCapability('MicrosoftEdge', '96.0', 'Windows 10'),
],
// Do not allow parallel test execution. Makes the test execution a lot
// slower, but the setup simpler.
Expand Down
63 changes: 63 additions & 0 deletions test/e2e/12_webvitalsAsCustomEvent/webvitalsAsCustomEvent.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,19 @@

<a id="open-blank-tab" href="about:blank" target="_blank">Open new blank tab</a>

<div id="webVitals_wrapper">
<div>
<h1 id="webVitals_cls">Web vitals CLICK HERE...!!</h1>

<h3 id="cls">CLS: </h3>
<h3 id="inp">INP: </h3>
<h3 id="fid">FID: </h3>
<h3 id="lcp">LCP: </h3>
<h3 id="fcp">FCP: </h3>
<h3 id="ttfb">TTFB: </h3>
</div>
</div>

<div class="jumbotron" id="resultwrap" style="display: none">
<div class="media">
<div class="media-body">
Expand All @@ -89,7 +102,57 @@ <h2 class="media-heading" id="result">...</h4>
</div>
</div>

<script src="https://unpkg.com/web-vitals"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
const metrics = {
cls: undefined,
fid: undefined,
lcp: undefined,
inp: undefined,
fcp: undefined,
ttfb: undefined
};

const updateMetrics = (name, value) => {
metrics[name.toLowerCase()] = value;
updateUI();
};

const updateUI = () => {
document.getElementById("cls").innerText = `CLS: ${metrics.cls}`;
document.getElementById("fid").innerText = `FID: ${metrics.fid}`;
document.getElementById("lcp").innerText = `LCP: ${metrics.lcp}`;
document.getElementById("inp").innerText = `INP: ${metrics.inp}`;
document.getElementById("fcp").innerText = `FCP: ${metrics.fcp}`;
document.getElementById("ttfb").innerText = `TTFB: ${metrics.ttfb}`;
};

const reportWebVitals = ({ name, value }) => {
console.log('METRICS', name, value)
console.log('---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------')
updateMetrics(name, value);
};

window.addEventListener('load', function () {
webVitals.onCLS(console.log);
webVitals.onFID(console.log);
webVitals.onLCP(console.log);
webVitals.onINP(console.log);
webVitals.onFCP(console.log);
webVitals.onTTFB(console.log);

webVitals.onCLS(reportWebVitals);
webVitals.onFID(reportWebVitals);
webVitals.onLCP(reportWebVitals);
webVitals.onINP(reportWebVitals);
webVitals.onFCP(reportWebVitals);
webVitals.onTTFB(reportWebVitals);
});
});


$('#button3').on('click', function () {
$('#button1').show();
});
Expand Down
83 changes: 51 additions & 32 deletions test/e2e/12_webvitalsAsCustomEvent/webvitalsAsCustomEvent.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,41 +38,60 @@ describe('12_webvitalsAsCustomEvent', () => {
cexpect(beacon.ty).to.equal('pl');
});

expectOneMatching(beacons, beacon => {
cexpect(beacon.ty).to.equal('cus');
cexpect(beacon.ts).to.be.a('string');
cexpect(parseFloat(beacon.d)).to.be.above(3000);
cexpect(beacon.n).to.equal('instana-webvitals-LCP');
cexpect(beacon.l).to.be.a('string');
cexpect(beacon.pl).to.equal(pageLoadBeacon.t);
cexpect(beacon.m_id).to.match(/^v\d+(-\d+)+$/);
});
return browser.getCapabilities().then(capabilities => {
const browserName = capabilities.get('browserName');
const browserVersion = parseFloat(capabilities.get('version'));

expectOneMatching(beacons, beacon => {
cexpect(beacon.ty).to.equal('cus');
cexpect(beacon.ts).to.be.a('string');
cexpect(beacon.n).to.equal('instana-webvitals-FID');
cexpect(beacon.l).to.be.a('string');
cexpect(beacon.pl).to.equal(pageLoadBeacon.t);
cexpect(beacon.m_id).to.match(/^v\d+(-\d+)+$/);
});
if ((browserName === 'chrome' && browserVersion >= 77) ||
(browserName === 'MicrosoftEdge' && browserVersion >= 79) ||
(browserName === 'firefox' && browserVersion >= 122)) {
expectOneMatching(beacons, beacon => {
cexpect(beacon.ty).to.equal('cus');
cexpect(beacon.ts).to.be.a('string');
cexpect(parseFloat(beacon.d)).to.be.above(3000);
cexpect(beacon.n).to.equal('instana-webvitals-LCP');
cexpect(beacon.l).to.be.a('string');
cexpect(beacon.pl).to.equal(pageLoadBeacon.t);
cexpect(beacon.m_id).to.match(/^v\d+(-\d+)+$/);
});
}

expectOneMatching(beacons, beacon => {
cexpect(beacon.ty).to.equal('cus');
cexpect(beacon.ts).to.be.a('string');
cexpect(beacon.n).to.equal('instana-webvitals-CLS');
cexpect(beacon.l).to.be.a('string');
cexpect(beacon.pl).to.equal(pageLoadBeacon.t);
cexpect(beacon.m_id).to.match(/^v\d+(-\d+)+$/);
});
if ((browserName === 'chrome' && browserVersion >= 76) ||
(browserName === 'MicrosoftEdge' && browserVersion >= 79) ||
(browserName === 'firefox' && browserVersion >= 89)) {
expectOneMatching(beacons, beacon => {
cexpect(beacon.ty).to.equal('cus');
cexpect(beacon.ts).to.be.a('string');
cexpect(beacon.n).to.equal('instana-webvitals-FID');
cexpect(beacon.l).to.be.a('string');
cexpect(beacon.pl).to.equal(pageLoadBeacon.t);
cexpect(beacon.m_id).to.match(/^v\d+(-\d+)+$/);
});
}

if ((browserName === 'chrome' && browserVersion >= 77) ||
(browserName === 'MicrosoftEdge' && browserVersion >= 79)) {
expectOneMatching(beacons, beacon => {
cexpect(beacon.ty).to.equal('cus');
cexpect(beacon.ts).to.be.a('string');
cexpect(beacon.n).to.equal('instana-webvitals-CLS');
cexpect(beacon.l).to.be.a('string');
cexpect(beacon.pl).to.equal(pageLoadBeacon.t);
cexpect(beacon.m_id).to.match(/^v\d+(-\d+)+$/);
});
}

expectOneMatching(beacons, beacon => {
cexpect(beacon.ty).to.equal('cus');
cexpect(beacon.ts).to.be.a('string');
cexpect(beacon.n).to.equal('instana-webvitals-INP');
cexpect(beacon.l).to.be.a('string');
cexpect(beacon.pl).to.equal(pageLoadBeacon.t);
cexpect(beacon.m_id).to.match(/^v\d+(-\d+)+$/);
if ((browserName === 'chrome' && browserVersion >= 96) ||
(browserName === 'MicrosoftEdge' && browserVersion >= 96)) {
expectOneMatching(beacons, beacon => {
cexpect(beacon.ty).to.equal('cus');
cexpect(beacon.ts).to.be.a('string');
cexpect(beacon.n).to.equal('instana-webvitals-INP');
cexpect(beacon.l).to.be.a('string');
cexpect(beacon.pl).to.equal(pageLoadBeacon.t);
cexpect(beacon.m_id).to.match(/^v\d+(-\d+)+$/);
});
}
});
});
});
Expand Down
Loading