How to retrieve page HTML from Lighthouse? - lighthouse

I'm trying to add some custom metrics to Lighthouse. In order to do some basic checks, I need to get the raw HTML of the webpage.
I've tried without any success using driver.sendCommand (DOM.getDocument or DOM.getFlattenedDocument) and driver.querySelectorAll('html') and driver.evaluateAsync('document.documentElement.outerHTML').
How can I manage to get the raw HTML from Chrome into Lighthouse?
Thank you,
Fabio

This should be a straightforward call to driver.evaluateAsync from withing a gatherer. Something like:
const expression = `document.querySelector('html').outerHTML`;
const html = await passContext.driver.evaluateAsync(expression);
Inside of the afterPass of a gatherer should be able to get the html. HTML w/o Javascript does this. Modify the expression in that gatherer to get the idea of how it should work.
Here's a really rough example of just logging the html once it's gathered from hacking on HTML w/o Javascript:

Related

How to change content on a bare-bone single page web-app in dart?

I want to write a singer page, client-side web app in dart.
I want to change dinamicly the content of my single html content.
I haven't found what's best practice to change the entire content in a fast and easy way, without loading a hole new html-file.
My idea was dealing all children of the body tag, and replace it with a body tag html snippet from an other html-file.
Problem: I don't know if it's best practice, and how to achieve it!
Just use the browser API to remove and add content.
document.body.innerHtml = `<body><div>Hello, World!</div></body>`;
or
document.body.children.clear();
document.body.children.add(DivElement()..text = 'Hello, World!');
See also https://api.dartlang.org/stable/2.1.0/dart-html/Element-class.html
You can do everything the browser can do. For example what's explained in https://developer.mozilla.org/en-US/docs/Web/API
That was what I'm searched for!
I didn't noticed that it is that easy to read content from a file.
The code below shows the solution of my problem.
var gameHtml = 'game.html';
HttpRequest.getString(gameHtml)
.then((String fileContent) {
body.innerHtml = fileContent;
});
So after reading the content of 'game.html' i placed the String in my 'index.html' body-tag.
https://api.dartlang.org/stable/2.1.0/dart-html/HttpRequest-class.html

Posting to a web form and catching results from JavaScript code

How would I go about achieving the following
I have some HTML data triggered from an Evernote new note action
I need to pass this HTML string to a website via an http post with form variables
I then need to catch the resulting web page text in a variable to use in my next action.
For clarity the website simply takes some HTML and converts it to markdown passing it back out as the body of the resulting page
Regards in advance
Dan
Sweet! So I've got this working. In my example, text is some html I pulled out of a dummy previous step:
The output is:
Which has the markdown as a key. If you want to tweak other data based on the api params, you can do that as GET params below html
​Let me know if you've got any other questions!

iMacros get the ID of a div, not the content

I am trying to learn iMacros (and avoid jscript or vbscript IF possible). I was reading any resource i could find since yesterday and the imacros reference does not have any helpful example of what i need.
All the methods I tried, will extract either the TXT or the HTM content of an element. My problem is that i have a div like this
<div class="cust_div" id="Customer_45621">
...content in here...
</div>
And the part i need to extract is 45621 which is the only dynamic part of the id attribute.
For example, between 3 customers, it could be
Customer_45621
Customer_35123
Customer_85663
All I need is the number. Thanks.
The solution is
TAG POS=1 TYPE=DIV ATTR=cust_div EXTRACT=HTM
Then you have to use EVAL and use in it JS scripting to extract the id. That is the only way. You can't cut the HTML code without JS, but you can use JS in iMacros with EVAL.

MVC HTML helper wrapper for jqPlot

I wish to create an MVC wrapper around jqPlot.
I want to have a helper object to render the required html container element and the required java scripts to draw the chart.
Something that will look like this:
#Html.jqPlot()
.ChartType(eChartTypes.PieChart)
.ChartData(someData)
.RenderChart();
Now I'm only at the initial design phase and I know what the jqPlot object should look like to achieve that, the problem I'm having is with the java script that suppose to be emitted to draw the actual chart using jqPlot.
Suppose I will render the following script in my .RenderChart() method
public string RenderChart()
{
string chartCode = string.format(#"
<script type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
$(document).ready(function(){
var plot1 = $.jqplot ('{0}', [{1}]);
});
",this.ChartGuid, this.ChartData);
return chartCode;
}
The above is not actual code but just a general representation of the idea.
So the problem is that i don't want the Helper to emit the JS code into the body of the Html document, furthermore i cannot let it do that becuse some of the required scripts may be at the bottom of the html (as the best practice states).
Any suggestions ?
What would be the best way to emit JS code using an HTML helper if the situation requires it (like this one) ?
I think, listening to an even will be a possible solution, in this case the even of outputting or finishing the rendering of the footer. so maybe your code will give as an option to listen to an event and render at that moment, but this is of course platform dependent. I also worked on a php wrapper you can fork it here: https://github.com/oumsofiane1/jqplotPHPwrapper.git
and just implemented a helper, but of course you can extend that :-)
Hope this helps

Grails: getting DOM string from g.render?

I need to get the DOM string of a template. However, a highCharts chart is added to the template after it is loaded. When I use g.render, I do not get the chart in the resultant string. Basically, the javascript doesn't run. Can anyone help?
If some kind of javascript has to run on the client, before the server is doing something else, you have to use ajax to make a callback from the client. See the grails ajax docs for code examples.

Resources