search

sitespeedio / sitespeed.io

sitespeed.io is an open-source tool for comprehensive web performance analysis, enabling you to test, monitor, and optimize your website’s speed using real browsers in various environments.
https://www.sitespeed.io/
MIT License
4.76k stars 603 forks source link

ERROR: Caught error from Browsertime Error: PageIndex out of range #3670

Closed ankur762 closed 11 months ago

ankur762 commented 2 years ago

Have you read the documentation?

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
soulgalore commented 2 years ago

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 codeawait 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.

ankur762 commented 2 years ago

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)

Icecold777 commented 2 years ago

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

ankur762 commented 2 years ago

Hi @Icecold777 @soulgalore , do we have any reference script where these type of use cases are being handled ?

ankur762 commented 2 years ago

Hi @soulgalore @Icecold777 thanks for your help, I am able to generate html report for entire transaction.

ankur762 commented 2 years ago

@Icecold777 @soulgalore are we going to implement this functionality by default, if yes can you please provide the ETA.

soulgalore commented 2 years ago

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.

soulgalore commented 11 months ago

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.

rajakaipa commented 6 months ago

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)

I am also getting this type of error, Can you please help me to sortout this issue?

rajakaipa commented 6 months ago

If there is any reference document also it will be helpful.

soulgalore commented 6 months ago

@rajakaipa here's the documentation for scripting: https://www.sitespeed.io/documentation/sitespeed.io/scripting/

Please create a new issue and follow the instructions in https://www.sitespeed.io/documentation/sitespeed.io/bug-report/ then I can have a look!