I have the site say 'https://example.com' on which I am running LH perf audits programmatically connected via puppeteer for both desktop and mobile sites. I am trying to set cookies for testing pages behind authentication. It works fine for desktop but for mobile emulation, it doesnt.
I am pasting snippet of code below.
function delay(ms) {
return new Promise(r => setTimeout(r, ms));
}
async function asyncForEach(urls, callback) {
for (const url in urls) {
await callback(urls[url], url)
}
}
function filtersn(cookies) {
return cookies.filter(cookie => cookie.name == "SN")
}
(async() => {
const url = 'https://example.com';
const paths = {
"myaccount": "/account",
"notifications": "/notifications",
"wishlist": "/wishlist"
}
await asyncForEach(paths, async(path, key) => {
const browser = await puppeteer.launch({ headless: true });
browser.on('targetchanged', async(target) => {
const page = await target.page();
await page.setViewport({
"isMobile": true, // toggling this setting along 'disableDeviceEmulation" for dekstop/mobile runs
"width": 480,
"height": 768
})
// Below Code didnt work
// if (page && page.target().url() === url) {
// const client = await page.target().createCDPSession();
// await client.send('Network.enable');
// await client.send('Network.setCookies', {
// "cookies": [{
// "name": "SN",
// "value": "xxxxxxxxxxxxxxxxxx",
// "domain": ".example.com",
// "path": "/",
// "session": true
// }]
// })
// }
// Even this didnt work
// await page.setCookie({
// "name": "SN",
// "value": "xxxxxxxxxxxxxxxxxx",
// "domain": ".example.com",
// "path": "/",
// "session": true
// });
console.log(`=================================== Loading... ${url}${path}`);
page.on('load', async() => {
console.log('Page Loaded......');
console.log(filtersn(await page.cookies()))
const p = `${__dirname}/SS_${key}.png`;
await delay(2000).then(() => {
return page.screenshot({ path: p, fullPage: true }).catch(e => console.error(e))
});
})
});
const lhr = await lighthouse(`${url}${path}`, {
port: (new URL(browser.wsEndpoint())).port,
output: 'json',
logLevel: 'info',
disableNetworkThrottling: true,
disableCpuThrottling: true,
disableDeviceEmulation: false, // Toggling this setting for desktop/mobile emulation
extraHeaders: {
"Cookie": "SN=xxxxxxxxxxxxxxxxxx;domain=.example.com;path=/"
}
// Finally extraHeaders worked for Dekstop but didnt work for mobile
}, perfConfig);
console.log('\n\n-------------------------------');
console.log(`Lighthouse score: ${lhr.score}`);
console.log('-------------------------------\n\n');
await browser.close();
})
})();
Mobile site uses service workers for providing offline capabilities. I am not able to figure out why the cookie is not getting set when deviceEmulation is switched true for enabling mobile.
@mohanrohith when you say it's not working, what precisely are you referring to? Are you not seeing the cookie come through on the server or in the service worker?
Mobile site uses service workers for providing offline capabilities. I am not able to figure out why the cookie is not getting set when deviceEmulation is switched true for enabling mobile.
Makes me think you might be talking about the service worker, in which case, we don't fully support this workflow yet and will need to wait to address #709 before it can be done.
Who needs a flexible fluid experienced service worker
no movement in here, so I'm going to close (related discussion over in #6207)