How do I get attribute id from html code with Playwright Python? - html

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)

Related

How to get a div's text value with react testing library?

<a className="stats__back" href="./..">
🠔
</a>
<div className="profile-heading">ACCOUNT</div>
<div className="profile-header">
<div className="profile-avatar">
<img className="account-avatar" src={`./images/avatar${avatar}.png`} alt="User's avatar" width="150" height="150" />
</div>
<div className="profile-header-info">
<div className="profile-username">{userName}</div>
<div className="profile-creation-date">
This is the part of the code I'm working on, and I'm trying to get access to div with className="profil-username" for unit test.
Here is how my test looks:
test('New user name is set after user name edition.', () => {
act(() => {
ReactDOM.render(<Account/>, container);
});
let profileUserName = container.querySelector("div.profile-username");
let editButton = container.querySelector('.edition-text');
let editUserName = container.querySelector('.account_modal-nick-input');
let okButton = container.querySelector('.modal-button-save');
let newUserName = "newUserName";
fireEvent.click(editButton);
fireEvent.change(editUserName, {target: {value: newUserName}});
fireEvent.click(okButton);
expect(profileUserName.value).toBe(newUserName);
});
So generally speaking I'm totally new to react and generally unit tests, and my final question is: How to get this particularry div using querySelector and how to call his value after this, is this just by writing divContainerVariableName.value or something else
Thank you in advance
const profileUserName = container.querySelector("div.profile-username");
expect(profileUserName.textContent).toBe(newUserName);
If you have more than one .profile-username, it will get the first one appears in the dom tree.
You should first check if you have targeted the correct dom element first, then consider getting it's text context.

How to extract a number from a string using Puppeteer?

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);

when using a GET method data is coming in console not in HTML

I have written my get method inside ngOnInIt(). When I am printing data in console it is visible, but when printing in HTML using interpolation, it is returning [ object object]
{{filteredCourses}} ==> [object object]
and when i am using {{course.category|json}} so here i am getting all values of array ["course" : "database" , "category" : "database" , "length" : "2hr" ] thats how the value is coming
html :-
<div class="courses" fxLayout="row wrap" fxLayoutAlign="center" [#animateStagger]="{value:'50'}">
<div class="course" *ngFor="let course of filteredCourses" fxFlex="100" fxFlex.gt-xs="50"
fxFlex.gt-sm="33" [ngClass]="course.category" [#animate]="{value:'*',params:{y:'100%'}}">
<div class="course-content" fxLayout="column" fxFlex="1 1 auto">
<div class="header" fxLayout="row" fxLayoutAlign="center center"
[ngClass]="course.category + '-bg'">
<div class="category" fxFlex>
{{course.category|json}}
</div>
</div>
</div>
Code:
filteredCourses: any[];
this.product_name = getProduct()['name'];
console.log(this.product_name);
this.token = getToken();
this.httpHeaders = new HttpHeaders({ "Authorization": "Bearer " + this.token });
this._httpClient.get('http://127.0.0.1:8000/api/products/info/'+this.product_name+'/',{headers: this.httpHeaders})
.subscribe(
data => {
this.product = data;
this.courses = data['cources'];
this.filteredCourses = this.courses;
console.log(this.filteredCourses);
},
error => {
console.log(error);
}
);
try using JSON.stringify(yourObject) or maybe in certain cases you can use Object.keys().
You need to use loop if its an array of object or you might want to print the properties of object individually.
But if you want to see the object filteredCourses in template, use json pipe.
{{filteredCourses | json}}
In case you need help to print values using *ngFor or properties, do let us know.
I suppose filteredCourses collection contains an array of objects. So you need to iterate through filteredCourses using ngFor directive to render data in the HTML template.
Like:
<ul>
<li ngFor="let item of filteredCourses">{{item.courseName}}</li>
</ul>

Getting attribute of element in XPath

I want to learn web-scraping. Therefore, I started practicing. I am trying to get data-ad-id from HTML using XPath.
HTML structure like this:
<body id="z1234">
<div class="viewport">
<div class="g-row">
<div class="g-col-9">
<div class="cBox cBox--content cBox--resultList">
<div class="cBox-body cBox-body--resultitem dealerAd rbt-reg rbt-no-top"><a class="link--muted no--text--decoration result-item" href="url" data-ad-id="248059713"></a>
</div>
</div>
</div>
</div>
</body>
XPath for <a class="link--muted no--text--decoration result item" > is //*[#id="z1234"]/div[3]/div[4]/div[2]/div[1]/div[11]/a. If I choose different car, only last div changes.
According to this I write C# code:
var url = "https://suchen.mobile.de/fahrzeuge/search.html?damageUnrepaired=NO_DAMAGE_UNREPAIRED&isSearchRequest=true&maxPowerAsArray=KW&maxPrice=10000&minPowerAsArray=KW&minPrice=10000&scopeId=C";
HttpWebRequest request = (HttpWebRequest)WebRequest.Create(url);
HttpWebResponse response = (HttpWebResponse)request.GetResponse();
StreamReader sr = new StreamReader(response.GetResponseStream());
string sourceCode = sr.ReadToEnd();
HtmlAgilityPack.HtmlDocument document = new HtmlAgilityPack.HtmlDocument();
document.LoadHtml(sourceCode);
var rows = document.DocumentNode.SelectNodes("//*[#id='z1234']/div[3]/div[4]/div[2]/div[1]/div[11]");
foreach (var row in rows)
{
var id = row.SelectSingleNode("a[#data-ad-id]").InnerText;
Console.WriteLine("id:" + id);
}
}
I cannot get anything from this Node. It is null. How can I get data-ad-id?
EDIT
I change my C# code:
var rows = document.DocumentNode.SelectNodes("//a[#data-ad-id]")[0];
var id = rows.Attributes["data-ad-id"].Value;
Now I can get data-ad-id.
As per the code of the site, I could sense that you have no innertext for that "A" tag. It just contains DIV and IMG tags.
You will need to fetch data-ad-id using
//a[#data-ad-id]/#data-ad-id

unable to select a table within div using html agility pack

image of div tree
I am trying to scrape data from a table in a web page using htmlagilitypack.
Below is the html portion
<div id="table-matches" style="display: block;"><table class=" table-main"><colgroup><col width="50"><col width="*"><col width="50"><col width="50"><col width="50"><col width="50"><col width="50"></colgroup><tbody><tr class="dark center" xtid="28575"><th class="first2 tl" colspan="3"><a class="bfl" href="/hockey/usa/"><span class="ficon f-200"> </span>USA</a><span class="bflp">»</span>ECHL</th><th>1</th><th>X</th><th>2</th><th xparam="Number of available bookmakers odds~2">B's</th></tr><tr class="odd deactivate" xeid="pn36Jn1f"><td class="table-time datet t1496703900-1-1-0-0 ">04:35</td><td class="name table-participant">South Carolina Stingrays - <span class="bold">Colorado Eagles</span><span class="ico-event-info" onmouseover="toolTip('Colorado Eagles wins series 4-0. 4th leg.', this, event, '4');allowHideTootip(false);delayHideTip(200);return false;" onmouseout="allowHideTootip(true);delayHideTip(200);"> </span></td><td class="center bold table-odds table-score">1:2</td><td class="odds-nowrp" xodd="1.91" xoid="E-2nrdfxv464x0x6av8v">1.91</td><td class="odds-nowrp" xodd="4.74" xoid="E-2nrdfxv498x0x0">4.74</td><td class="odds-nowrp result-ok" xodd="2.79" xoid="E-2nrdfxv464x0x6av90">2.79</td><td class="center info-value">1</td></tr><tr class="dark center" xtid="28308"><th class="first2 tl" colspan="3"><a class="bfl" href="/hockey/usa/"><span class="ficon f-200"> </span>USA</a><span class="bflp">»</span>NHL</th><th>1</th><th>X</th><th>2</th><th xparam="Number of available bookmakers odds~2">B's</th></tr><tr class="odd deactivate" xeid="EyxiHGE4"><td class="table-time datet t1496707200-1-1-0-0 ">05:30</td><td class="name table-participant"><span class="bold">Nashville Predators</span> - Pittsburgh Penguins<span class="ico-event-info" onmouseover="toolTip('Series tied 2-2. 4th leg.', this, event, '4');allowHideTootip(false);delayHideTip(200);return false;" onmouseout="allowHideTootip(true);delayHideTip(200);"> </span></td><td class="center bold table-odds table-score">4:1</td><td class="odds-nowrp result-ok" xodd="2.15" xoid="E-2ns9hxv464x0x6b2jp">2.15</td><td class="odds-nowrp" xodd="3.86" xoid="E-2ns9hxv498x0x0">3.86</td><td class="odds-nowrp" xodd="2.91" xoid="E-2ns9hxv464x0x6b2jq">2.91</td><td class="center info-value">55</td></tr></tbody></table></div>
I have been trying combination of properties to access the data within table but all i get is the initial node containing div.
Here is the code used by me
var html = #urlOddsportal;
HtmlWeb web = new HtmlWeb();
var htmlDoc = web.Load(html);
//var html = new HtmlAgilityPack.HtmlDocument();
//html.LoadHtml(new WebClient().DownloadString(urlOddsportal)); // load a string
var root = htmlDoc.DocumentNode;
var node = root.SelectSingleNode("//div[#id='table-matches']"); //this returns non null
// all of the below functions return null value
var rows = node.SelectNodes(".//tr[#class='odd deactivate']");
var table = root.SelectSingleNode("//table[#class=' table-main']");
var tablerows = node.SelectNodes(".//table/tbody/tr[1]");// [#class='odd deactivate']");
var tabletag = htmlDoc.DocumentNode.SelectNodes("//table[#class='table-main']");
Can someone tell me where i am going wrong.
Thanks
Does this return var = table ?
var table = document.DocumentNode.Descendants("table").FirstOrDefault(_ => _.HasProperty("class", " table-main")
Has property =
public static bool HasProperty(this HtmlNode node, string property, params string[] valueArray)
{
var propertyValue = node.GetAttributeValue(property, "");
var propertyValues = propertyValue.Split(' ');
return valueArray.All(c => propertyValues.Contains(c));
}
If it does work you can try it out on the other nodes returning null
I prefere to use this method as it is easier to read than xcode formulas