sitespeedio
ERROR: Caught error from Browsertime Error: PageIndex out of range
Have you read the documentation?
- [X] Yes, I've read the how to make a reproducable bug guide
- [X] Yes, I've read the how to debug my script guide
URL
abc
What are you trying to accomplish
Create a sitespeed script to for UI performance, Script is passing end 2 end, but html metrices are not getting collected.
docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:latest CreateQuickRo2.js -n 2 --spa --multi
What browser did you use?
Chrome
How to reproduce
module.exports = async function(context, commands) {
// Navigate to a URL, but do not measure the URL
await commands.navigate(
'https://************/'
);
try {
// Add text into an input field, finding the field by id
await commands.addText.byId('*************', 'email');
await commands.click.byIdAndWait('*******');
await commands.addText.byId('**********', 'password');
// Start the measurement and give it the alias login
await commands.measure.start('login');
// Find the submit button and click it and wait for the
// page complete check to finish on the next loaded URL
await commands.click.byIdAndWait('loginButton');
await commands.wait.byTime(1000);
// await commands.click.byClassNameAndWait('sideNav_menuBtn__2ghRh full-height icon_size__l__3SlH4 icon-nine-dots-menu');
await commands.click.byClassNameAndWait('sideNav_menuBtn__2ghRh full-height icon_size__l__3SlH4 icon-nine-dots-menu');
await commands.measure.stop();
await commands.wait.byTime(1000);
// -------ROPage---------------------
await commands.measure.start('repair order');
await commands.addText.byClassName('repair order', 'ant-input');
await commands.click.byClassNameAndWait('global-menu-item searchViewItem_searchViewItem__1It93');
await commands.measure.stop();
await commands.wait.byTime(1000);
await commands.mouse.moveTo.byXpath("//div[text()='Action']");
await commands.wait.byTime(1000);
await commands.measure.start('Action');
await commands.click.byXpathAndWait("//*[contains(text(),'Create Quick RO')]");
await commands.measure.stop();
await commands.measure.start('Enter Details');
await commands.mouse.clickAndHold.byXpath("//div[@class='flex-auto-grow-shrink full-width full-width formFocusable serviceAdvisor undefined css-2b097c-container']/div[1]/div[1]/div[2]/div[1]/input");
await commands.mouse.singleClick.atCursor();
await commands.addText.byXpath('perf-sa-001', "//div[@class='flex-auto-grow-shrink full-width full-width formFocusable serviceAdvisor undefined css-2b097c-container']/div[1]/div[1]/div[2]/div[1]/input");
await commands.wait.byTime(1000);
await commands.click.bySelector('*[id^="react-select-"]');
await commands.click.byXpathAndWait("//div[@class='full-width formFocusable teamId undefined select_select__32Euz select_selectBoxBorder__28sk1 ant-select ant-select-enabled']");
await commands.addText.byXpath('Team2', "(//input[@class='ant-select-search__field'])[2]");
await commands.wait.byTime(1000);
await commands.click.bySelector('*[class^="ant-select-dropdown-menu-item"]');
await commands.click.byXpathAndWait("//input[@id='customerInfo']");
await commands.addText.byXpath('Perf-user',"//input[@id='customerInfo']");
await commands.wait.byTime(10000);
await commands.wait.byXpath('(//*[contains(@id,"react-select")])[3]', 20000);
await commands.click.byXpathAndWait('(//*[contains(@id,"react-select")])[5]');
await commands.wait.byTime(2000);
await commands.mouse.clickAndHold.byXpath('//*[@id="vin"]');
await commands.wait.byTime(2000);
await commands.wait.byXpath('(//*[contains(@id,"react-select")])', 10000);
await commands.wait.byTime(2000);
await commands.click.byXpathAndWait('(//*[contains(@id,"react-select")])[1]')
await commands.click.byIdAndWait("tag");
await commands.addText.byId('Perf',"tag");
await commands.click .byIdAndWait("milesIn");
await commands.addText.byId('1000',"milesIn");
await commands.measure.stop();
await commands.measure.start('CreateRO');
// await commands.click.byXpath("//button[contains(.,'Create')]");
await commands.click.byXpathAndWait("//button[contains(.,'Create')]");
await commands.wait.byTime(5000);
return commands.measure.stop();
} catch (e) {
// We try/catch so we will catch if the the input fields can't be found
// The error is automatically logged in Browsertime an rethrown here
// We could have an alternative flow ...
// else we can just let it cascade since it caught later on and reported in
// the HTML
await commands.measure.stop()
throw e;
}
};
Relevant log output
Google Chrome 102.0.5005.61
Mozilla Firefox 100.0
Microsoft Edge 101.0.1210.53
[2022-05-31 06:07:29] INFO: Versions OS: linux 5.10.76-linuxkit nodejs: v16.15.0 sitespeed.io: 24.9.0 browsertime: 16.7.0 coach: 7.1.2
[2022-05-31 06:07:30] INFO: Running tests using Chrome - 1 iteration(s)
[2022-05-31 06:07:31] INFO: Navigating to url https://app.tekionkloud.xyz/ iteration 1
[2022-05-31 06:07:49] INFO: Start to measure login
[2022-05-31 06:09:00] INFO: Take after page complete check screenshot
[2022-05-31 06:09:01] INFO: Take cumulative layout shift screenshot
[2022-05-31 06:09:01] INFO: Take largest contentful paint screenshot
[2022-05-31 06:09:04] INFO: Start to measure repair order
[2022-05-31 06:09:37] INFO: Take after page complete check screenshot
[2022-05-31 06:09:38] INFO: Take cumulative layout shift screenshot
[2022-05-31 06:09:39] INFO: Take largest contentful paint screenshot
[2022-05-31 06:09:39] INFO: No element attached to the entry in largest-contentful-paint
[2022-05-31 06:09:40] INFO: Injecting navigationStart event in the trace log since we could not find any for the most active frame.
[2022-05-31 06:09:42] INFO: Start to measure Action
[2022-05-31 06:10:03] INFO: https://****************** has been tested before within the same run, it will get an extra query parameter named browsertime_run. Make sure to use alias to keep track of the URLs
[2022-05-31 06:10:14] INFO: Take after page complete check screenshot
[2022-05-31 06:10:15] INFO: Take cumulative layout shift screenshot
[2022-05-31 06:10:16] INFO: Take largest contentful paint screenshot
[2022-05-31 06:10:16] INFO: No element attached to the entry in largest-contentful-paint
[2022-05-31 06:10:17] INFO: Injecting navigationStart event in the trace log since we could not find any for the most active frame.
[2022-05-31 06:10:17] INFO: Start to measure Enter Details
[2022-05-31 06:11:47] INFO: https:/****************has been tested before within the same run, it will get an extra query parameter named browsertime_run. Make sure to use alias to keep track of the URLs
[2022-05-31 06:12:14] INFO: Take after page complete check screenshot
[2022-05-31 06:12:14] INFO: Take cumulative layout shift screenshot
[2022-05-31 06:12:15] INFO: Take largest contentful paint screenshot
[2022-05-31 06:12:15] INFO: No element attached to the entry in largest-contentful-paint
[2022-05-31 06:12:17] INFO: Injecting navigationStart event in the trace log since we could not find any for the most active frame.
[2022-05-31 06:12:18] INFO: Start to measure Enter Details3
[2022-05-31 06:13:21] INFO: https://************* has been tested before within the same run, it will get an extra query parameter named browsertime_run. Make sure to use alias to keep track of the URLs
[2022-05-31 06:13:44] INFO: Take after page complete check screenshot
[2022-05-31 06:13:46] INFO: Take cumulative layout shift screenshot
[2022-05-31 06:13:47] INFO: Take largest contentful paint screenshot
[2022-05-31 06:13:47] INFO: No element attached to the entry in largest-contentful-paint
[2022-05-31 06:13:48] INFO: Injecting navigationStart event in the trace log since we could not find any for the most active frame.
[2022-05-31 06:13:49] INFO: Start to measure CreateRO
[2022-05-31 06:14:02] INFO: https://*************** has been tested before within the same run, it will get an extra query parameter named browsertime_run. Make sure to use alias to keep track of the URLs
[2022-05-31 06:14:11] INFO: Take after page complete check screenshot
[2022-05-31 06:14:12] INFO: Take cumulative layout shift screenshot
[2022-05-31 06:14:13] INFO: Take largest contentful paint screenshot
[2022-05-31 06:14:13] INFO: No element attached to the entry in largest-contentful-paint
[2022-05-31 06:14:14] INFO: Injecting navigationStart event in the trace log since we could not find any for the most active frame.
[2022-05-31 06:14:17] INFO: Get visual metrics from the video
[2022-05-31 06:15:04] INFO: Get visual metrics from the video
[2022-05-31 06:15:51] INFO: Get visual metrics from the video
[2022-05-31 06:16:03] INFO: Get visual metrics from the video
[2022-05-31 06:17:08] INFO: Get visual metrics from the video
[2022-05-31 06:17:51] INFO: Get visual metrics from the video
[2022-05-31 06:18:13] ERROR: Could not add meta data to the HAR, miss page 3
[2022-05-31 06:18:13] ERROR: Could not add meta data to the HAR, miss page 4
[2022-05-31 06:18:13] ERROR: Could not add meta data to the HAR, miss page 5
[2022-05-31 06:18:13] INFO: https://********** 107 requests, TTFB: 334ms, firstPaint: 3.61s, firstVisualChange: 200ms, FCP: 9.54s, DOMContentLoaded: 1.03s, LCP: 9.91s, CLS: 0.0002, TBT: 3.01s, Load: 1.04s, speedIndex: 8.06s, visualComplete85: 28.07s, lastVisualChange: 49.57s
[2022-05-31 06:18:13] INFO: https://********** 63 requests, TTFB: 334ms, firstPaint: 3.61s, firstVisualChange: 1.38s, FCP: 9.54s, DOMContentLoaded: 1.03s, LCP: 9.91s, CLS: 0.002, TBT: 11.04s, Load: 1.04s, speedIndex: 3.24s, visualComplete85: 7.90s, lastVisualChange: 15.21s
[2022-05-31 06:18:13] INFO: https://**********?browsertime_run=2 14 requests, TTFB: 334ms, firstPaint: 3.61s, firstVisualChange: 866ms, FCP: 9.54s, DOMContentLoaded: 1.03s, LCP: 9.91s, CLS: 0.0095, TBT: 10.69s, Load: 1.04s, speedIndex: 1.10s, visualComplete85: 1.07s, lastVisualChange: 10.67s
[2022-05-31 06:18:13] INFO: https://**********?browsertime_run=3 TTFB: 334ms, firstPaint: 3.61s, firstVisualChange: 367ms, FCP: 9.54s, DOMContentLoaded: 1.03s, LCP: 9.91s, CLS: 0.0095, TBT: 61.46s, Load: 1.04s, speedIndex: 19.49s, visualComplete85: 61.50s, lastVisualChange: 85.33s
[2022-05-31 06:18:13] INFO: https://**********?browsertime_run=4 TTFB: 334ms, firstPaint: 3.61s, firstVisualChange: 2.57s, FCP: 9.54s, DOMContentLoaded: 1.03s, LCP: 9.91s, CLS: 0.0095, TBT: 38.06s, Load: 1.04s, speedIndex: 11.68s, visualComplete85: 23.37s, lastVisualChange: 61.83s
[2022-05-31 06:18:13] INFO: https://**********?browsertime_run=5 TTFB: 334ms, firstPaint: 3.61s, firstVisualChange: 1.81s, FCP: 9.54s, DOMContentLoaded: 1.03s, LCP: 9.91s, CLS: 0.0095, TBT: 13.68s, Load: 1.04s, speedIndex: 6.71s, visualComplete85: 7.44s, lastVisualChange: 10.43s
[2022-05-31 06:18:14] ERROR: Could not find the right index 3 for har for url https://**********?browsertime_run=3
[2022-05-31 06:18:14] ERROR: Caught error from Browsertime Error: PageIndex out of range
at module.exports.pickAPage (/usr/src/app/node_modules/coach-core/lib/har/harCutter.js:18:11)
at Object.pickAPage (/usr/src/app/node_modules/coach-core/lib/index.js:84:12)
at Object.processMessage (/usr/src/app/lib/plugins/browsertime/index.js:264:31)
[2022-05-31 06:18:22] INFO: HTML stored in /sitespeed.io/sitespeed-result/CreateQuickRo_js/2022-05-31-06-07-29
➜ sitespeed ls
CreateQuickRo.js Deal.js docker-compose.yml roSearch.js sitespeed-result
➜ sitespeed vi CreateQuickRo2.js
➜ sitespeed docker run --rm -v "$(pwd):/sitespeed.io" sitespeedio/sitespeed.io:24.9.0 CreateQuickRo2.js --browsertime.iterations 1 --spa --multi
Google Chrome 102.0.5005.61
Mozilla Firefox 100.0
Microsoft Edge 101.0.1210.53
[2022-05-31 06:51:34] INFO: Versions OS: linux 5.10.76-linuxkit nodejs: v16.15.0 sitespeed.io: 24.9.0 browsertime: 16.7.0 coach: 7.1.2
[2022-05-31 06:51:34] INFO: Running tests using Chrome - 1 iteration(s)
[2022-05-31 06:51:36] INFO: Navigating to url https://app.tekionkloud.xyz/ iteration 1
[2022-05-31 06:53:11] INFO: Start to measure Enter Details
[2022-05-31 06:56:42] INFO: Take after page complete check screenshot
[2022-05-31 06:56:44] INFO: Take cumulative layout shift screenshot
[2022-05-31 06:56:46] INFO: Take largest contentful paint screenshot
[2022-05-31 06:56:46] INFO: No element attached to the entry in largest-contentful-paint
[2022-05-31 06:56:49] INFO: Injecting navigationStart event in the trace log since we could not find any for the most active frame.
[2022-05-31 06:56:51] INFO: Start to measure Enter Details3
[2022-05-31 06:57:39] INFO: https://app.tekionkloud.xyz/ro/repair-orders has been tested before within the same run, it will get an extra query parameter named browsertime_run. Make sure to use alias to keep track of the URLs
[2022-05-31 06:58:10] INFO: Take after page complete check screenshot
[2022-05-31 06:58:11] INFO: Take cumulative layout shift screenshot
[2022-05-31 06:58:13] INFO: Take largest contentful paint screenshot
[2022-05-31 06:58:13] INFO: No element attached to the entry in largest-contentful-paint
[2022-05-31 06:58:15] INFO: Injecting navigationStart event in the trace log since we could not find any for the most active frame.
[2022-05-31 06:58:16] INFO: Start to measure CreateRO
[2022-05-31 06:58:53] INFO: Take after page complete check screenshot
[2022-05-31 06:58:55] INFO: Take cumulative layout shift screenshot
[2022-05-31 06:58:57] INFO: Take largest contentful paint screenshot
[2022-05-31 06:58:57] INFO: No element attached to the entry in largest-contentful-paint
[2022-05-31 06:59:00] INFO: Injecting navigationStart event in the trace log since we could not find any for the most active frame.
[2022-05-31 06:59:02] INFO: Get visual metrics from the video
[2022-05-31 07:01:19] INFO: Get visual metrics from the video
[2022-05-31 07:02:19] INFO: Get visual metrics from the video
Hi @ankur762 thanks for the detailed report!
One thing I noticed is that when you run commands.measure.start that is suppose to measure a new page view., navigating to a new page. If you use it in SPA application, you need to at least have one request that happens, so sitespeed.io internally can create a new "page" for that data. In you code await commands.measure.start('Enter Details'); I'm think that could better be measured with https://www.sitespeed.io/documentation/sitespeed.io/scripting/#stop-watch
I think that will fix one of the errors as first step.
Hi @soulgalore , I tried above thing but still getting the same error, const stopWatch = commands.stopWatch.get('EnterDetails'); // await commands.measure.start('Enter Details'); stopWatch.start(); await commands.mouse.clickAndHold.byXpath("//div[@class='flex-auto-grow-shrink full-width full-width formFocusable serviceAdvisor undefined css-2b097c-container']/div[1]/div[1]/div[2]/div[1]/input"); await commands.mouse.singleClick.atCursor(); await commands.addText.byXpath('perf-sa-001', "//div[@class='flex-auto-grow-shrink full-width full-width formFocusable serviceAdvisor undefined css-2b097c-container']/div[1]/div[1]/div[2]/div[1]/input");
await commands.wait.byTime(1000);
await commands.click.bySelector('*[id^="react-select-"]');
**const time = stopWatch.stop();
commands.measure.add(stopWatch.getName(), time);**
Logs :- [2022-06-07 09:08:47] INFO: Take largest contentful paint screenshot [2022-06-07 09:08:47] INFO: No element attached to the entry in largest-contentful-paint [2022-06-07 09:08:52] INFO: Get visual metrics from the video [2022-06-07 09:09:34] INFO: Get visual metrics from the video [2022-06-07 09:10:22] INFO: Get visual metrics from the video [2022-06-07 09:10:38] INFO: Get visual metrics from the video [2022-06-07 09:10:54] INFO: Get visual metrics from the video [2022-06-07 09:12:19] ERROR: Could not add meta data to the HAR, miss page 3 [2022-06-07 09:12:19] ERROR: Could not add meta data to the HAR, miss page 4 [2022-06-07 09:12:21] ERROR: Could not find the right index 3 for har for url https://*****************?browsertime_run=3 [2022-06-07 09:12:21] ERROR: Caught error from Browsertime Error: PageIndex out of range at module.exports.pickAPage (/usr/src/app/node_modules/coach-core/lib/har/harCutter.js:18:11) at Object.pickAPage (/usr/src/app/node_modules/coach-core/lib/index.js:84:12) at Object.processMessage (/usr/src/app/lib/plugins/browsertime/index.js:264:31)
Hey @ankur762 actually that's not a bug but a feature)
Looks like you are trying to measure 3 actions that do not change the page URL (some JS action or SPA navigation). Examine your e2e manually, I'm pretty sure you'll find out such cases. Sitespeed tracks and saves HARs if see that the page URL was changed.
Please take a look at a piece of code that I provided here https://github.com/sitespeedio/sitespeed.io/issues/3676#issuecomment-1151675162
In short, a possible workaround is to force the browser to update URL using selenium right after measure.start
Hi @Icecold777 @soulgalore , do we have any reference script where these type of use cases are being handled ?
Hi @soulgalore @Icecold777 thanks for your help, I am able to generate html report for entire transaction.
@Icecold777 @soulgalore are we going to implement this functionality by default, if yes can you please provide the ETA.
I think a first step is to add an SPA example in https://github.com/sitespeedio/sitespeed.io/tree/main/test/data/html (I think I mentioned that in another issue). If someone could contribute that, it would be great. When we have that, then we can sync with the work Chrome has done in https://chromestatus.com/feature/6232287446302720 (I haven't paid so close attention to it) and then see what's the best way forward.
We will not build in a page URL changer for SPAs, that seems like a way to fix a broken internet :) Lets implement soft navigations for Chrome as a first step, I'll start that next year.