How can I measure something on a separate page without measuring the actual page load as well

[shawneenc]

Your question

Hi @soulgalore,

I have a script where I need to do 2 measurements :

1. Load page and measure
2. Expand a dropdown on the page and measure this in a separate start/stop method

Currently sitespeed.io does not allow me to navigate to the URL for the page before I start the measurement. I.e. the navigation has to go before the start command, like so :

  await commands.measure.start('Load Assignments');
  await commands.navigate(BASE_URL + '/profile/assignments');
  await commands.click.byXpathAndWait('//h1[contains(text(),"Assignments")]');
  await commands.measure.stop();

 await commands.measure.start('Expand Assignments');
 await commands.navigate(BASE_URL + '/profile/assignments');
 await 
commands.click.byXpathAndWait('/html/body/div/div[1]/div/div/div[2]/div/div[2]/div[2]/div/ul/li[2]/div/div/div/div/div[1]/div[3]/button/span[2]', TIMEOUT);
 await commands.wait.byXpath('//h3[contains(text(),"Assignment Description")]', TIMEOUT);
 return commands.measure.stop();

For the 2nd method, I only want to measure the expansion of a single assignment. I do not want to measure loading the page again. Have tried many different things here and can find no way around this. Please advise and help, as currently the 2nd method/test is obsolete

[shawneenc]

Hi @soulgalore ,

Any update on this? This is impacting my tests and I cannot find a work around. Currently when I want to take the measurement for the dropdown expansion, I have to include loading the page beforehand and I really do not want to do this, as its not a valid measurement/test.

Surely there has to be some sort of workaround that can be used here to just take the measurement for the dropdown expansion by itself?

[soulgalore]

Hi @shawneenc have you tried https://www.sitespeed.io/documentation/sitespeed.io/scripting/#stop-watch that measures things that are not a navigation? That measurement are then added to the result of the page that you tested just before the stop watch.

[shawneenc]

Hi @soulgalore, This solution gives me the same results as I am getting, as I only have the option to navigate to a page and then take the 2nd measurement. Result is that both tests are measured and bundled as 1 in 1 page, the solution provided here does not provide the ability to display the 2 measurements separately on the page

The second measurement I want to take needs to be on its own.

I need a way to navigate to the page first, then start a measurement for only expanding the dropdown. Is there any other way around this?

[soulgalore]

The second measurement I want to take needs to be on its own.

I don't full understand that part, you mean you do not want to measure any navigation at all, you only want to measure a dropdown expansion?

[shawneenc]

Hi @soulgalore,

I want to only measure the expansion on the page, so I want to have navigated to the page before starting the measurement, like so:

  await commands.navigate(BASE_URL + '/profile/assignments');
    await commands.measure.start("Learner_Access_Assignments");

Sitespeed will not allow me to do this, as when I start the measurement, I am not navigating to / loading a new page.

Is there a work around i can use here? I DO NOT want the loading of the page and the expansion of the dropdown (which is 100 courses) to be included within the same page/test. This is an invalid test for me

[Icecold777]

Hi, @shawneenc that's well known SPA issue (or actions made using JS without page URL change).

there is a pretty straightforward workaround - force update page URL using selenium just after measure.start.

this piece of code should do the trick

const webdriver = context.selenium.webdriver;
const driver = context.selenium.driver;

const updateURL = async (textToAdd) => {
	const currentURL = await driver.getCurrentUrl();  
	const script = 'history.pushState({}, "", "' + currentURL + textToAdd +'")' 
	console.log('script is : ' + script); 
	await driver.executeScript(script);
}

 await commands.navigate(BASE_URL + '/profile/assignments');

await commands.measure.start('Expand Assignments');
await updateURL('/expand')
 await 
commands.click.byXpathAndWait('/html/body/div/div[1]/div/div/div[2]/div/div[2]/div[2]/div/ul/li[2]/div/div/div/div/div[1]/div[3]/button/span[2]', TIMEOUT);
 await commands.wait.byXpath('//h3[contains(text(),"Assignment Description")]', TIMEOUT);
 return commands.measure.stop();

please try it out and let me know if it works. For sure you can customize updateURL function. I'm sure that it should help because I faced the exact situation plenty of times.

PS @soulgalore looks like it's time to implement this functionality by default. I know that sitespeed adds ?browsertimerun=X query parameter but, unfortunately, it doesn't help.

[soulgalore]

@Icecold777 thanks for the tips! So I would like to add a SPA site to the automatic tests that we run as a GitHub actions as a first step (that first fails until we implement the fix). We have a simple website here https://github.com/sitespeedio/sitespeed.io/tree/main/test/data/html and we should add a SPA example. Could we be lucky that you could provide a small example site? :)

[shawneenc]

Thank you @Icecold777,

This worked for me! :-)

[jmrane]

Hi, I am unable to add the timer in a page. Using below code.

 const stopWatch = commands.stopWatch.get('search');
	await commands.addText.byXpath('7307586','/html/');
	await commands.wait.byPageToComplete()	
stopWatch.stopAndAdd()

Cant see the "search" in the Pages section of the result. Thanks

[soulgalore]

Hi @jmrane not 100% sure, what do you want to measure and what happens on the page when you add that text by xpath?

[jmrane]

it is basically a adding a text in to a search box and get the output

[divyachandrashekara]

@Icecold777, We are using below code to resolve the issue which we get when same URL loads multiple times while performing different user action. Since the URL is updated with a text our script is failing .. Is there any solution to resolve this ? const updateURL = async (textToAdd) => { const currentURL = await driver.getCurrentUrl();
const script = 'history.pushState({}, "", "' + currentURL + textToAdd +'")' console.log('script is : ' + script); await driver.executeScript(script); } @soulgalore

[soulgalore]

You need to measure the actual page load, because the measurements need to be attached to a page.

[ko-synth]

You need to measure the actual page load, because the measurements need to be attached to a page.

It is clear currently you need a page load, but is that something you are fixed on (as per design), or would it make sense to provide a way to create a page or another type of grouping in case when the page load is not of interest? I certainly found myself hacking around this limitation.

[soulgalore]

@ko-synth yeah, maybe there could be a way to hack this. The things is that everything today is really page-driven: to see the result in the HTML you need to choose a page. The same way with the data that is stored in time series database. Maybe creating a page could be a way.