Check if PowerBI page is loaded (using Selenium)

[knyazs]

Hi!

I am using Selenium to automate load and performance testing of PowerBI reports and I need a reliable way to pause code execution until page is fully loaded (all queries executed and all slicers and charts displayed). Many pages on Google suggested I should use following JavaScripts codes to achieve that:

• return jQuery.active == 0
• return document.readyState == "complete"

But this does not work for me as both lines are always verified as true and code continues executing although I can see that chart has not been drawn.

The only way I could made it work is to get XPaths of all elements from the report (slicers, charts, etc.) and wait for all of those elements to "become"visible:

public void waitUntilReportProcesses(IWebDriver driver)
{
	WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(600.00));
	var xpaths = new string[]
	{
		"//*[@id=\"pvExplorationHost\"]/div/div/div/div[1]/div[2]/div[3]/div[2]/div[2]", // chart 1
		"//*[@id=\"pvExplorationHost\"]/div/div/div/div[1]/div[2]/div[9]/div[2]/div[2]", // chart 2
		"//*[@id=\"pvExplorationHost\"]/div/div/div/div[1]/div[2]/div[6]/div[2]/div" // slicer 1
		//...
	};

	foreach (var xpath in xpaths)
		wait.Until(ExpectedConditions.ElementIsVisible(By.XPath(xpath)));
}

I tried to make above code more universal by finding elements using css (By.CssSelector). With that approach I am able to get all of the necessary elemets but ElementIsVisible and VisibilityOfAllElementsLocatedBy methods seems to behave differently in that case and code never pauses execution.

What would be the proper way to check if PowerBI page has been loaded?

Thanks,

[taruntalreja08]

Hey Did you get the solution to your problem?Can you provide me the code sample ? I want to create a tool to capture the Page Load Time of a Power BI Report. Can you help me with the approach I need to follow?

[knyazs]

Unfortunately, I cannot share code with you but I can tell you how I solved it - using Selenium I managed to make it work by "catching" so-called "spinning wheel" or "wait" sign on the page after slicer is clicked. I would start measuring time from slicer click and then wait few seconds to see if "wait" sign appears and disappears - it there is no wait sign after few seconds, I would take time captured immediately after slicer click; if "wait" appeared, I would wait until it disappears and capture timestamp.

I hope this helps.

[wadezone]

I know you cannot share your code, but an example of your code with dummy names would be good to understand how you were able to use the spin wheel. Did you get this from another example on the web?

[Anonymous]

Hey,

I am doing similar thing in selenium with PBI report. Can you share how did you get the hold of wait symbol or element in the report.

Thanks,

Kanika

[ekeijl]

The new JavaScript API allows you to listen to the event that indicates that the report is done loading:

https://github.com/Microsoft/PowerBI-JavaScript/wiki/Handling-Events

I'm not sure whether you could use this directly in your test. A different approach could be to listen for the 'loaded' event in your application code and then make some changes to the DOM in your application (something that can be detected by Selenium) that flags the report as 'finished loading'.

Just an idea, hope this helps 🙂

[Eric_Zhang]

---

@knyazs wrote:

Hi!

I am using Selenium to automate load and performance testing of PowerBI reports and I need a reliable way to pause code execution until page is fully loaded (all queries executed and all slicers and charts displayed). Many pages on Google

What would be the proper way to check if PowerBI page has been loaded?

Thanks,

---

@knyazs

I don't have much expertise on javascript so I have no idea on how to capture the page loading accomplished in JS.

However, as per the knowledge in my previous job, to test the page loading performance, a more accurate way would be tracing the network traffic. And based on my test, regarding an embeded report, the loading span is between the first embeded url request and the last "querydata" request. See below snapshot captured in F12 in firefox. So you may consider to use Wireshark or Fiddler.

[knyazs]

Hi Eric,

Thanks for the quick reply. Fiddler is a great tool but I don't think I can use it in this case.

Just to be absolutely clear on this matter, let me explain what I'm doing - I created C# project which uses Selenium to simulate user clicks on PowerBI report slicers. After slicer is clicked, page will start refreshing but Selenium cannot automatically detect when load is over as PowerBI (I assume) uses ajax / json / jquery. If page is not completely loaded and code continues with the execution (next slicer click) an attempt to click on non-existing / non-visible / non-clickable / ... element may occur and code will throw an error. Also, adding a delay after slicer click is not an option as I am trying to test how quick report is.

Thanks,

[ddevogel]

@knyazs Might Selenium's built-in ImplicitWait help to solve your problem?

http://www.seleniumhq.org/docs/04_webdriver_advanced.jsp

http://stackoverflow.com/questions/11001030/how-i-can-check-whether-a-page-is-loaded-completely-or-n...

[knyazs]

@ddevogel Yes, I am currently using that mechanism (check code sample in my first post) and it works fine. The issue is that XPaths need to be taken for each element of each report and if report changes, code needs to be changed as well.

I was just wondering if there is something "universal" for PowerBI pages, such as some flag or tag on the page which I could reuse across muliple reports?

@ekeijl Sounds promissing. As I only know basics of JavaScript / Web Dev, code sample of this approach would mean a lot 🙂

[ekeijl]

There are quite some code samples on the Github wiki, I suggest you check them out.

It would look something like this (combined this and this😞

// HTML
<div
    powerbi-type="report"
    powerbi-report-id="5dac7a4a-4452-46b3-99f6-a25915e0fe55"
    powerbi-embed-url="https://app.powerbi.com/reportEmbed"
></div>

// JS
var embedConfiguration = {
    type: 'report',
    id: '5dac7a4a-4452-46b3-99f6-a25915e0fe55',
    embedUrl: 'https://app.powerbi.com/reportEmbed'
};
var $reportContainer = $('#reportContainer');
var report = powerbi.embed($reportContainer.get(0), embedConfiguration);

// Here we listen for the loaded event
report.on('loaded', event => {
    // Here the reports are loaded, do something that can be detected by Selenium.
    $('#reportContainer').addClass('done-loading');
});

[knyazs]

@ekeijl powerbi-type, powerbi-report-id and powerbi-embed-url are properties that don't exist in the report until you embed report somewhere else - that is when report gets id as well.

I wouldn't want to embed PowerBI report, I just need to find some existing element (document, window or something third) to attach to and inject or execute JS to check if page is loaded.