How would I extract the number 2,550 from the string "2,550 Things" using Puppeteer?
<div id="container" role="main">
<h3 class="highlightedText" role="heading">2,550 Things</h3>
</div>
Like this :
await page.waitForSelector('div#container > h3.highlightedText');
const text = await page.$eval(
'div#container > h3.highlightedText',
el => el.innerText.replace(/\s+.*/, "")
);
console.log(text);
Related
How do I get value of attribute from html code?
It´s an atribute that i would get: data-rbd-draggable-id="10061894-9a62-4ce5-adfa-ea3b879e15eb"
A html example:
<div data-rbd-draggable-context-id="0" data-rbd-draggable-id="10061894-9a62-4ce5-adfa-ea3b879e15eb" style="position: static;">
<div class="collapse-group category-item-list-item__collapse-group-link">
for item in all_items:
element = {}
idproduct = await item.query_selector('data-rbd-draggable-id')
element['id'] = await idproduct.inner_text()
name = await item.query_selector('.category-list-item-description__name')
element['nome'] = await name.inner_text()
elements.append(element)
I am trying to wrap html around inner div only when some condition is met. But when I run the script, it says Module build failed: SyntaxError Unexpected token. I tried to use conditional rendering.
return (
<Fragment>
<div>
{
(true) ? <div class="imghvr-wrapper"> : ''
}
<div class="imghvr">
<div class="imghvr-overlay imghvr-anim-none imghvr-anim-single">
</div>
{
(true) ? </div> : ''
}
</div>
</Fragment>
);
Like this:
const myComponent = () => {
const myCondition = true;
const child = (
<div className="imghvr">
<div className="imghvr-overlay imghvr-anim-none imghvr-anim-single" />
</div>
);
return (
myCondition ? <div className="imghvr-wrapper">{ child }</div> : child
);
};
You can't split tags like this: myCondition ? <div className="imghvr-wrapper"> : null you should always close your tags. For example that code is valid: (true) ? <div className="imghvr-wrapper"/> : '' because tag is closed
getNames(): Observable<bookmodel[]> {
const endpoints = 'https://api.nytimes.com/svc/books/v3/lists/current/hardcover-fiction.json?api-key=xxxxxxxx';
return this.http.get(endpoints).pipe(
map(this.extractData));
}
<h1 class="uk-flex uk-flex-center">Top Books{{bestsellers_date}}</h1>
<hr class="uk-divider-icon">
<div class="uk-child-width-1-5#s uk-grid-match" uk-grid>
<div *ngFor="let name of names; let i = index">
<div class="uk-card uk-card-hover uk-card-body">
<h3 class="uk-card-title">{{name.title}}</h3>
<img style="height:250px;" src="{{name.book_image}}"><br/><br/>
<span>Summary: {{name.description || ' NA' |characters:150}}</span><br />
<hr class="uk-divider-icon">
<span>Author {{name.author}}</span>
<br/>
<br/>Best Sellers Rank {{name.rank}}
<br />
<span>Weeks on List {{name.weeks_on_list}}</span>
<div class="uk-card-footer">
<span><a class="uk-button uk-button-primary" href="{{name.amazon_product_url}}">Buy On Amazon</a></span>
</div>
</div>
</div>
</div>
Okay so the code above makes a call to the api and the api returns an object with nested arrays in order to get the infomation I want Ive put defined the data as data.results.books but theres data that I want to access in the data.results Ive tryed just taking the .books part out but the the NGFOR doesn't work with objects is there a way to store or even get the data in data.results and how would I store it
service.ts
getNames(): Observable<bookmodel[]> {
const endpoints = 'https://api.nytimes.com/svc/books/v3/lists/current/hardcover-fiction.json?api-key=7W3E72BGAxGLOHlX9Oe2GQSOtCtRJXAt';
return this.http.get<bookmodel[]>(endpoints);
}
component.ts
this.service.getNames().subscribe(names => this.names = names);
HTML
<div *ngFor="let name of names; let i = index">
......
</div>
If you are not subscribing it use async pipe in html
<div *ngFor="let name of names | async; let i = index">
......
</div>
Try updating the *ngFor with an async pipe. You need to use async pipe because httpClient always returns Observable.
<div *ngFor="let name of names | async; let i = index"></div>
Also update the getNames and remove the .pipe from there
getNames(): Observable<bookmodel[]> {
const endpoints = 'https://api.nytimes.com/svc/books/v3/lists/current/hardcover-fiction.json?api-key=7W3E72BGAxGLOHlX9Oe2GQSOtCtRJXAt';
return this.http.get<bookmodel[]>(endpoints);
}
I am very new in end to end testing. In my app I have a login page, which I want to show the user when they logout from the app. Now there is a text h1 inside the div. But I am not getting the text from that div and that is why the expected result is different from the actual result.
Here is my login page html.
<div *ngIf="!isLoggedIn" class="login-controller">
<div layout="column" class="login-dialog">
<h1>Here is a heading</h1>
<h2>Second Heading</h2>
<div class="border">
...
</div>
</div>
</div>
Here is my app.po.ts
async getLogInPage(){
return await element(by.css('h1')).getText();
}
async logoutOfApplication() {
var userMenu = element(by.css(".prof-dropbtn > span"));
browser.wait(ExpectedConditions.presenceOf(userMenu), 10000);
await userMenu.click();
var logoutButton = element(by.id("logout"));
await logoutButton.click();
}
Now app.e2e-spec.ts
it('Test for logout', () => {
page.logoutOfApplication();
expect(page.getLogInPage()).toEqual('Here is a heading');
page.loginToApplication("email.com", "demo");
});
If you want get h1 value you have to write like this
it('Test for logout', () => {
page.logoutOfApplication();
expect(element.all(by.css('.login-dialog h1')).getText()).toEqual('Here is a heading');
page.loginToApplication("eamil.com", "demo");
});
This Meteor server code tries to extract the innerHTML from a html string using cheerio package but the error says that the elements has no method 'size'
What am I doing wrong and how to fix it? Thanks
here is the html;
<span class='errorMsg'>some text </span>
message: (html, typeMsg) => {
let $ = cheerio.load(html);
const selection = 'span.' + typeMsg;
const elements = $(selection);
return elements.size() > 0 ? elements.get(0).innerHTML.trim() : '';
}
After few trials and errors and trying to understand the docs, which cloud benefit from some more explanations.
Option 1
const element = $(selection).eq(0);
return element ? element.text().trim() : '';
Option 2
const element = $(selection).get([0]);
return element ? element.children[0].data.trim() : '';
I used option 1 in this case.
var cheerio = require('cheerio');
var $ = cheerio.load('<b>hello</b> world');
// innerHTML
$('body').html()
// <b>hello</b> world
// outerHTML
$.html($('body'))
// <body><b>hello</b> world</body>
// innerText
$('body').text()
// hello world
docs: https://api.jquery.com/html/#html1
My HTML looked like this:
<div class="col-xs-8">
<b>John Smith</b><br />
<i>Head of Widgets</i><br />
Google<br />
Maitland, FL<br />
123-456-7890<br />
<a
href="mailto:example#example.com"
>example#example.com</a
>
</div>
I wanted to extract the inner html of the div in the context of an "each" loop, so I used this code:
$(this).html()
Which returned
<b>John Smith</b><br />
<i>Head of Widgets</i><br />
Google<br />
Maitland, FL<br />
123-456-7890<br />
<a
href="mailto:example#example.com"
>example#example.com</a
>