When I run tests I cannot capture screenshots at the moment in Jenkins without some heavy work. What I would like to do is get the HTML output of the body to see what is displayed when a particular error occurs.
What I've already tried is getting the textContent, which is pretty close but I would like to get the stringified HTML if possible.
await t
.click(something)
.wait(1000)
.click(somethingElse)
.wait(1000)
.expect(mySelector.exists)
.ok(await Selector('body').textContent, { timeout: 25000 }); // if .ok fails it should print out the contents of body
I get the text but would want HTML.
Take a look at the Selector Custom Properties. There is an example of how to get innerHTML of the element.
Related
I'm following this tutorial about Ionic and directives and everything works fine except when I try to get the FAB element using ElementRef's nativeElement.getElementsByClassName, like this:
this.fab = this.element.nativeElement.getElementsByClassName('fab')[0]
That returns undefined. The problem is when I remove the index and print the whole HTMLCollection using console.log, it shows me a complete list with all the FAB's inside the element.
Running
console.log(this.element.nativeElement.getElementsByClassName('fab'),
this.element.nativeElement.getElementsByClassName('fab')[0]);
on ngOnInit gives the following result:
What am I doing wrong here? Every part of the code related to the problem is equal to the tutorial and it's a quite recent video...
I think the reason here is that those elements are not present while you asking for them with that line:
console.log(this.element.nativeElement.getElementsByClassName('fab'),
this.element.nativeElement.getElementsByClassName('fab')[0]);
There is simple example which shows where problem can be:
console.log(document.getElementsByClassName('fab'), document.getElementsByClassName('fab')[0]);
const el1 = document.createElement('div');
el1.setAttribute('class', 'fab');
const el2 = document.createElement('div');
el2.setAttribute('class', 'fab');
setTimeout(() => {
this.abc.nativeElement.appendChild(el1);
this.abc.nativeElement.appendChild(el2);
}, 2000);
Elements are added after 2 seconds and console log is same like yours, but when you click on HTMLCollection it will evaluate and shows you those elements - of course if you click after 2 seconds(when elements are present).
If those element are really present when you asking for them console log should look more like:
HTMLCollection(2) [div.fab, div.fab]
Also, note that this little i in Google Chrome console inform you that value is evaluted just now - at the moment when you click on it.
The below screenshot shows how my iron-data-table element looks when it first loads. Notice the data is missing and the headers are not fully formatted (the width seems to be too small to show the column header labels).
However, if I enter a character in the filter fields or click one of the sort buttons, the iron-data-table seems to re-draw itself and it looks fine. The columns and headers render properly and the data populates the table as expected.
This problem started when I added some directories to my file structure nested my iron-data-table inside neon-animated-pages. I double checked and all my imports are loading correctly. But I suspect that, somehow, there is a slight delay in fetching the data and somehow the table might be trying to render before the data arrives and not refreshing after the data arrives.
So I tried to add the following function. But to no avail. There is no render() method for iron-data-table.
<iron-data-table id="grid" ...
....
attached: function() {
this.async(function() {
this.$$('#grid').render();
}.bind(this), 500);
},
What could be causing this behavior? And what should I try next?
Edit
This plunk demonstrates the desired iron-data-table behavior.
This plunk demonstrates my problem behavior. (Not finished yet. Currently in progress.)
The configuration is approximately as follows.
parent-el.html
<neon-animated-pages>
...
<container-el...>...</container-el>
</neon-animated-pages>
container-el.html
<child-el ...>...</child-el>
child-el.html
<iron-data-table ...></iron-data-table>
Edit 2
Based on #SauliTähkäpää's comment, I tried the following fix unsuccessfully.
parent-el.html
<neon-animated-pages id="animator" ...>
...
<container-el...>...</container-el>
</neon-animated-pages>
...
attached: function() {
this.async(function() {
this.$.animator.notifyResize();
}.bind(this), 50);
},
Not that familiar with neon-animated-pages but by looking at the docs, it should call notifyResize() on selected pages as long as they extend iron-resizable-behavior.
So I think your options are either to make sure <container-element> and other elements in the tree are extending iron-resizable-behavior OR override the resizerShouldNotify to notify the grid directly. See more here: https://elements.polymer-project.org/elements/neon-animation?active=neon-animated-pages#method-resizerShouldNotify
To explicate for anyone who follows this question later...
Per #SauliTähkäpää's accepted answer, I successfully added the following code to each element in the chain (i.e., beginning with the element containing neon-animated-pages and ending with the element containing iron-data-table — in this example, that would be parent-el, container-el, and child-el).
parent-el.html, container-el.html, child-el.html.
<link rel="import" href="path/to/bower_components/iron-resizable-behavior/iron-resizable-behavior.html">
...
behaviors: [
Polymer.IronResizableBehavior,
],
I am not an experienced coder so excuse me if my explanation isn't perfect.
I'm making an html page and I'd like there to be a section that shows some Osu! stats. There's this osu api that spits out all of the information I could possibly need but there's a litle bit too much of it.
https://osu.ppy.sh/api/get_user?k=ff96ad02d159e0acad3282ad33e43a710dac96d5&u=Sceleri
The above returns:
[{"user_id":"6962718","username":"Sceleri","count300":"93129","count100":"15744","count50":"3404","playcount":"776","ranked_score":"184300015","total_score":"258886799","pp_rank":"345687","level":"34.115","pp_raw":"314.239","accuracy":"94.54791259765625","count_rank_ss":"1","count_rank_s":"55","count_rank_a":"74","country":"FI","pp_country_rank":"4112","events":[]}]
I'd like to parse a few numbers from there. Example:
"pp_raw":"314.239" -> <p>;314.239</p>;
The <p> would be inside a div and so on, where I can specify some CSS to it and make it look good. The main problem is extracting the data to separate <p> elements.
I have executed this with regex in Rainmeter before (I had help) but I have no idea how to do it in html.
Use Jquery ajax calls. The url you posted basically gives you a json object.
HTML:
<div id="pp_raw">
</div>
Jquery
$.get( "https://osu.ppy.sh/api/get_user?k=ff96ad02d159e0acad3282ad33e43a710dac96d5&u=Sceleri", function( data ) {
//You can put whatever you want in the style attr to make things pretty
$( "#pp_raw" ).html("<p style='color:red'>"+data[0]['pp_raw']+"</p> ");
});
JSFiddle:
https://jsfiddle.net/rwt5mdyk/8/
I'm working on a website to display some details from another website. Specifically I have an element I wish to display. I can get the elements xpath or css path, and I'd like to use this to display the value of the element in HTML box on a unrelated website.
I'm rather new to this so my question is really this basic, I'm sure it's been asked before but I just don't know what search terms to use. I've looked up what I can but I'm unsure if what I have found can be used in a HTML box (I've tried and failed, but I'm unsure if that's an error on my part or the application of the wrong method).
XPath: //*[#id="box2-server-status"]/div[3]/div[1]/div[1]/img
CSS Path:
#box2-server-status > div.box2-content > div:nth-child(4) > div.server-status-indicator > img
Any help/link with guides welcome!
Take a look at this, if that is what can be of help to you..
I got this page..
https://mkdizajn.github.io/my-colors/
and I'm about to pull the title from this page:
http://mkdizajn.github.io/about/
If you open inspector on that page and enter this code in 'console' (of if I got time and add it there in the source ;)
var content;
jQuery.ajax({
url: 'https://mkdizajn.github.io/about/',
success: function(data){
content = data;
var body = jQuery( content ) ;
alert( body.find('h1').text() ) ;
}
})
you will have to get content from second page in the form of alert.. .. take a note that page is from that same domain, that is very important
https://mkdizajn.github.io/my-colors/
hth, k
I have working with one angularjs example i have face one problem is that i have load html view then after one div is content html data that is come from controler(database call) also data content html tag like <hr> <images> but that are display as it is not render html so i want to render that html part to.
I know my problem is delayed data come from data base so that will dispay as a plan text.
I use ng-bind-html till they are display pain text not render html tags.
I have one answer is late page loading that will succesfully work but that is not the proper way bcoz some time database data may take long time that is not working in this type of condition.
Hi jay you have to make directive for your example which is name bind-unsafe-html pass your html string or content in that and then it will re render your html content.
For Example.
app.directive('bindUnsafeHtml', ['$compile', function ($compile) {
return function(scope, element, attrs) {
console.log("in directive");
scope.$watch(
function(scope) {
// watch the 'bindUnsafeHtml' expression for changes
return scope.$eval(attrs.bindUnsafeHtml);
},
function(value) {
// when the 'bindUnsafeHtml' expression changes
// assign it into the current DOM
element.html(value);
// compile the new DOM and link it to the current
// scope.
// NOTE: we only compile .childNodes so that
// we don't get into infinite loop compiling ourselves
$compile(element.contents())(scope);
}
);
};
}]);
I can understand your problem it's a problem of asynchronous jscript call.
http://www.w3schools.com/tags/att_script_async.asp
you can not expect the script embedded in your HTML code to work properly.
You need to separate it from your HTML and make it async.