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.

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

tests(devtools): sync e2e tests #14365

Merged
merged 3 commits into from
Sep 7, 2022
Merged
Changes from 1 commit
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
91 changes: 52 additions & 39 deletions third-party/devtools-tests/e2e/lighthouse/navigation_test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,41 +10,17 @@ import {
clickStartButton,
getAuditsBreakdown,
navigateToLighthouseTab,
selectCategories,
selectMode,
setClearStorage,
setLegacyNavigation,
setThrottlingMethod,
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,39 +34,44 @@ 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);
assert.strictEqual(outerHeight, 640);
assert.strictEqual(devicePixelRatio, 3);

const {auditResults, erroredAudits, failedAudits} = getAuditsBreakdown(lhr);
assert.strictEqual(auditResults.length, 150);
assert.strictEqual(auditResults.length, 152);
assert.strictEqual(erroredAudits.length, 0);
assert.deepStrictEqual(failedAudits.map(audit => audit.id), [
'service-worker',
'viewport',
'installable-manifest',
'apple-touch-icon',
'splash-screen',
'themed-omnibox',
'maskable-icon',
Expand All @@ -105,29 +86,35 @@ 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);
assert.strictEqual(auditResults.length, 150);
// [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, 152);
assert.strictEqual(erroredAudits.length, 0);
assert.deepStrictEqual(failedAudits.map(audit => audit.id), [
'service-worker',
'viewport',
'installable-manifest',
'apple-touch-icon',
'splash-screen',
'themed-omnibox',
'maskable-icon',
Expand All @@ -144,6 +131,32 @@ describe('Navigation', async function() {
});
assert.strictEqual(viewTraceText, 'View Trace');
});

it('successfully returns a Lighthouse report when settings changed', async () => {
await navigateToLighthouseTab('lighthouse/hello.html');

await setLegacyNavigation(mode === 'legacy');
await setClearStorage(false);
await selectCategories(['performance', 'best-practices']);
await selectMode('desktop');

await clickStartButton();

const {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');
});
});
}
});