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

Jump to bottom

tests(devtools): sync e2e tests #14365

Merged
merged 3 commits into from
Sep 7, 2022
Merged

tests(devtools): sync e2e tests #14365

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d8cda85
tests(devtools): sync e2e tests
adamraine Sep 7, 2022
07a6394
ope
adamraine Sep 7, 2022
21a4710
ope
adamraine Sep 7, 2022
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
92 changes: 57 additions & 35 deletions third-party/devtools-tests/e2e/lighthouse/navigation_test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,46 +5,23 @@
import {assert} from 'chai';

import {expectError} from '../../conductor/events.js';
import {setDevToolsSettings} from '../../shared/helper.js';
import {describe, it} from '../../shared/mocha-extensions.js';
import {
clickStartButton,
getAuditsBreakdown,
navigateToLighthouseTab,
selectCategories,
selectMode,
setLegacyNavigation,
setThrottlingMethod,
setToolbarCheckboxWithText,
waitForResult,
} from '../helpers/lighthouse-helpers.js';
import {click, goToResource, waitFor, setDevToolsSettings, waitForElementWithTextContent} from '../../shared/helper.js';

import type {ElementHandle} from 'puppeteer';

// This test will fail (by default) in headful mode, as the target page never gets painted.
// To resolve this when debugging, just make sure the target page is visible during the lighthouse run.

// TODO: update upstream.
async function navigateToLighthouseTab_2(path?: string): Promise<ElementHandle<Element>> {
await click('#tab-lighthouse');
// await waitForLighthousePanelContentLoaded();
await waitFor('.view-container > .lighthouse');
if (path) {
await goToResource(path);
}

return waitFor('.lighthouse-start-view-fr');
}

async function setLegacyNavigation_2(enabled: boolean, textContext = 'Legacy navigation') {
const toolbarHandle = await waitFor('.lighthouse-settings-pane .toolbar');
const label = await waitForElementWithTextContent(textContext, toolbarHandle);
await label.evaluate((label, enabled: boolean) => {
const rootNode = label.getRootNode() as ShadowRoot;
const checkboxId = label.getAttribute('for') as string;
const checkboxElem = rootNode.getElementById(checkboxId) as HTMLInputElement;
checkboxElem.checked = enabled;
checkboxElem.dispatchEvent(new Event('change')); // Need change event to update the backing setting.
}, enabled);
}

describe('Navigation', async function() {
// The tests in this suite are particularly slow
this.timeout(60_000);
Expand All @@ -58,26 +35,32 @@ describe('Navigation', async function() {
// TODO: Figure out why these are emitted in FR.
expectError(/Protocol Error: the message with wrong session id/);
expectError(/Protocol Error: the message with wrong session id/);
expectError(/Protocol Error: the message with wrong session id/);
expectError(/Protocol Error: the message with wrong session id/);
expectError(/Protocol Error: the message with wrong session id/);
}
});

it('successfully returns a Lighthouse report', async () => {
await setDevToolsSettings({language: 'en-XL'});
await navigateToLighthouseTab_2('lighthouse/hello.html');
await navigateToLighthouseTab('lighthouse/hello.html');

await setLegacyNavigation(mode === 'legacy');

await setLegacyNavigation_2(mode === 'legacy', 'L̂éĝáĉý n̂áv̂íĝát̂íôń');
await clickStartButton();

const {lhr, artifacts, reportEl} = await waitForResult();

// TODO: Reenable this for 10.0
// 9.6.x is forked so Lighthouse ToT is still using 9.5.0 as the version.
// assert.strictEqual(lhr.lighthouseVersion, '9.6.2');
// assert.strictEqual(lhr.lighthouseVersion, '9.6.6');
assert.match(lhr.finalUrl, /^https:\/\/localhost:[0-9]+\/test\/e2e\/resources\/lighthouse\/hello.html/);
assert.strictEqual(lhr.configSettings.throttlingMethod, 'simulate');
assert.strictEqual(lhr.configSettings.disableStorageReset, false);
assert.strictEqual(lhr.configSettings.formFactor, 'mobile');

const {innerWidth, innerHeight, outerWidth, outerHeight, devicePixelRatio} = artifacts.ViewportDimensions;
// This value can vary slightly, depending on the display.
// https://bugs.chromium.org/p/chromium/issues/detail?id=1346355
assert.approximately(innerHeight, 1742, 1);
assert.strictEqual(innerWidth, 980);
assert.strictEqual(outerWidth, 360);
Expand Down Expand Up @@ -105,23 +88,28 @@ describe('Navigation', async function() {
const viewTraceText = await reportEl.$eval('.lh-button--trace', viewTraceEl => {
return viewTraceEl.textContent;
});
assert.strictEqual(viewTraceText, 'V̂íêẃ Ôŕîǵîńâĺ T̂ŕâćê');

assert.strictEqual(lhr.i18n.rendererFormattedStrings.footerIssue, 'F̂íl̂é âń îśŝúê');
assert.strictEqual(viewTraceText, 'View Original Trace');
});

it('successfully returns a Lighthouse report with DevTools throttling', async () => {
await navigateToLighthouseTab('lighthouse/hello.html');

await setThrottlingMethod('devtools');
await setLegacyNavigation(mode === 'legacy');

await clickStartButton();

const {lhr, reportEl} = await waitForResult();

assert.strictEqual(lhr.configSettings.throttlingMethod, 'devtools');

const {auditResults, erroredAudits, failedAudits} = getAuditsBreakdown(lhr);
// [crbug.com/1347220] DevTools throttling can force resources to load slow enough for these audits to fail sometimes.
const flakyAudits = [
'server-response-time',
'render-blocking-resources',
];

const {auditResults, erroredAudits, failedAudits} = getAuditsBreakdown(lhr, flakyAudits);
assert.strictEqual(auditResults.length, 150);
assert.strictEqual(erroredAudits.length, 0);
assert.deepStrictEqual(failedAudits.map(audit => audit.id), [
Expand All @@ -144,6 +132,40 @@ describe('Navigation', async function() {
});
assert.strictEqual(viewTraceText, 'View Trace');
});

it('successfully returns a Lighthouse report when settings changed', async () => {
await setDevToolsSettings({language: 'en-XL'});
await navigateToLighthouseTab('lighthouse/hello.html');

await setToolbarCheckboxWithText(mode === 'legacy', 'L̂éĝáĉý n̂áv̂íĝát̂íôń');
await setToolbarCheckboxWithText(false, 'Ĉĺêár̂ śt̂ór̂áĝé');
await selectCategories(['performance', 'best-practices']);
await selectMode('desktop');

await clickStartButton();

const {reportEl, lhr, artifacts} = await waitForResult();

const {innerWidth, innerHeight, devicePixelRatio} = artifacts.ViewportDimensions;
// TODO: Figure out why outerHeight can be different depending on OS
assert.strictEqual(innerHeight, 720);
assert.strictEqual(innerWidth, 1280);
assert.strictEqual(devicePixelRatio, 1);

const {erroredAudits} = getAuditsBreakdown(lhr);
assert.strictEqual(erroredAudits.length, 0);

assert.deepStrictEqual(Object.keys(lhr.categories), ['performance', 'best-practices']);
assert.strictEqual(lhr.configSettings.disableStorageReset, true);
assert.strictEqual(lhr.configSettings.formFactor, 'desktop');

const viewTraceText = await reportEl.$eval('.lh-button--trace', viewTraceEl => {
return viewTraceEl.textContent;
});
assert.strictEqual(viewTraceText, 'V̂íêẃ Ôŕîǵîńâĺ T̂ŕâćê');

assert.strictEqual(lhr.i18n.rendererFormattedStrings.footerIssue, 'F̂íl̂é âń îśŝúê');
});
});
}
});