Retrieve text from a span class using Scrapy - xpath

I have been trying to extract text from a webpage using Scrapy. This is the HTML code:
<button type="submit" class="inlineBlock _2tga _49ve" title="Like Please" type="submit">
<div class>
<span class="_3jn- inlineBlock">...</span>
<span class="_49vh _2pi7">Like</span>
<span class="_5n6h _2pih" id="u_0_3">281</span>
</div>
</button>
EDIT:
<button class="inlineBlock _2tga _49ve" id="u_0_2" title="Like Please" type="submit">
<div class>
<span class="_3jn- inlineBlock">...</span>
<span class="_49vh _2pi7">Like</span>
<span class="_5n6h _2pih" id="u_0_3">281</span>
</div>
</button>
I want to extract the number 281. To do this, I tried:
response.xpath("//span[contains(#class,'_5n6h _2pih')]/descendant::text()")
And got:
[]
Also tried:
response.xpath("//span[contains(#class,'_5n6h _2pih')]/span[contains(#class, 'u_0_3')]/descendant::text()")
And got, again:
[]

Related

Why href in button doesn't redirect to link?

I have a html view and this view displays list of elements. All elements have two buttons (edit and delete). When I click on delete all is working correctly but when I click on edit new view is not displayed. When I want to enter my direct url to edit it, all is working...
This is fragment of my code:
<div class="container">
<!-- topics -->
<div class="row topic" th:each="user : ${users}">
<div class="col-4">
<p>
<div class="input-group-addon" style="width: 2.6rem"><i class="fa fa-at"></i></div>
<a class="title " th:href="#{'/user/' + ${user.id}}" th:text="${user.email}"></a>
</p>
</div>
<div class="col-4">
<p>
<div class="input-group-addon" style="width: 2.6rem"><i class="fa fa-user"></i></div>
<a class="title " th:href="#{'/user/' + ${user.id}}" th:text="${user.fullName}"></a>
</p>
</div>
<div class="col-2">
<form action="#" th:action="#{'/user/drop/{id}'(id=${user.getId()})}" th:method="delete" >
<input type="hidden" name="_method" value="delete" />
<button type="submit" class="btn btn-danger">Usuń użytkownika</button>
</form>
</div>
<div class="col-2"></div>
<!--My failed button-->
<button type="submit" class="btn btn-warning" th:href="#{'/user/edit/' + ${user.id}}">Edycja</button>
</div>
</div>
</div>
A <button> has no href attribute. What you're looking for is a "link" (an <a> "anchor" tag to be specific):
<a class="btn btn-warning" th:href="#{'/user/edit/' + ${user.id}}">Edycja</a>
The reason your other button "works" is because it's part of a <form> and it submits that form. It doesn't follow any kind of href attribute. You could also make this button part of a form, but that doesn't appear to be the intended functionality. The intended functionality here is to direct the user to a new page, so a link is appropriate.

MVC and Bootstrap 4: change style of generated button tag with DropDownListFor

In my ASP.NET MVC Core web app, I generate a dropdown via the following code in a .cshtml file:
<div>
#Html.DropDownListFor(x => x.SelectedType,
new SelectList(Model.Types, "TypeId", "Name"), "Select one...",
new
{
#class = "selectpicker",
data_show_subtext = "false",
data_live_search = "true"
})
</div>
I'm using the bootstrap-select library too, btw.
This generates the following HTML when I inspect the page in Chrome:
<div>
<div class="dropdown bootstrap-select">
<select class="selectpicker" data-live-search="true" data-show-subtext="false" data-val="true" data-val-required="Type is required."
id="SelectedType" name="SelectedType" tabindex="-98">
<!-- option tags omitted -->
</select>
<button type="button" class="btn dropdown-toggle btn-light" data-toggle="dropdown" role="button" data-id="SelectedType" title="X">
<div class="filter-option">
<div class="filter-option-inner">
<div class="filter-option-inner-inner">X</div>
</div>
</div>
</button>
<div class="dropdown-menu " role="combobox">
<div class="bs-searchbox">
<input type="text" class="form-control" autocomplete="off" role="textbox" aria-label="Search">
</div>
<div class="inner show" role="listbox" aria-expanded="false" tabindex="-1">
<ul class="dropdown-menu inner show"></ul>
</div>
</div>
</div>
</div>
All is good. However, with Bootstrap 4 I find myself needing to change the btn-light class to btn-outline-secondary in the <button> tag.
How do I do this via the HtmlHelper DropDownListFor method?
I can of course do some post-rendering stuff in JS like
$(".dropdown-toggle").removeClass("btn-light").addClass("btn-outline-secondary");
...but that seems like a fallback option and it's not optimal.

Vue.js is not working when its in seperate file?

When i put my script code in seperate file in js then my component is not working, only when i directly write code in view. Any suggestion why is that happening?
https://jsfiddle.net/coligo/txpy7ug4/
<div id="app">
<div class="container-fluid">
<ul class="list-group">
<post v-for="comment in comments" :post="comment"></post>
</ul>
<div id="comment-box">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter a comment..." v-model="comment" #keyup.enter="postComment">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" #click="postComment">Submit</button>
</span>
</div>
</div>
</div>
</div>
<template id="post-template">
<li class="list-group-item">
<i class="glyphicon glyphicon-chevron-up" #click="upvote" :class="{disabled: upvoted}"></i>
<span class="label label-primary">#{{ votes }}</span>
<i class="glyphicon glyphicon-chevron-down" #click="downvote" :class="{disabled: downvoted}"></i>
<a>#{{ post.title }}</a>
</li>
</template>
If your HTML is in different file than your JS code, You have to require that in your vue instance like explained here:
component.js
module.export = {
template: require('./templates/template.html'),
data: function(){
return {
text: "Hello World!"
};
}
};
template.html
<h1>{{ text }}<h1>

xpath of elemnts including same child

I want to click publish report button so I use this xpath->//button[#class='btn btn-success btn-block'].
I want to click that button who has href='http://www.jbalbertos.com', means that xpath should be like this //div/a[#href='http://www.jbalbertos.com/'] and //button[#class='btn btn-success btn-block']
if any one knows kindly give me right xpath statement.
<div class="search-business-description">
<div class="business-name ng-binding">J.B. Alberto's Pizza</div>
<div class="business-address ng-binding">
<div class="business-website">
<span class="ng-binding" ng-bind-html="getWebsite()"><a target="_blank" href="http://www.brchichago.com/">http://www.brchichago.com/</a>
</span>
</div>
</div>
<div class="business-website">
<span class="ng-binding" ng-bind-html="getWebsite()"><a target="_blank" href="http://www.jbalbertos.com/">http://www.jbalbertos.com/</a></span>
</div>
<div class="business-actions">
<button class="btn btn-success btn-block" ng-click="onPublish(result)">
</div>
</div>
if i understood correctly
//div[//a[#href='http://www.jbalbertos.com/']]/following-sibling::div[#class="business-actions"]/button[#class='btn btn-success btn-block']

How to deal with parentheses in a text node in xpath?

Say we have the following HTML code
<label for="467578">AgendaShowCapacity (1 remaining)</label>
I tried with the following xpath expression in Chrome but can't locate to that element:
//label[text()='AgendaShowCapacity (1 remaining)']
I was wondering whether the parenthese is to be blamed for this. If it is, how should I deal with it under such situation?
Any comments would be appreciated, thanks!
Edit 2012-9-18 real code block posted below
<div id="pageContent">
<fieldset>
<legend>Agenda</legend>
<ol class='fieldList custom' data-section='0'>
<li class="checkboxLeft" data-id="467578" data-z="1">
<div class="fieldHolder1">
<input id="467578" type="checkbox" name="467578" />
</div>
<div class="fieldHolder2">
<label for="467578">AgendaShowCapacity (1 remaining)</label>
</div>
</li>
<li class="checkboxLeft" data-id="467579" data-z="2">
<div class="fieldHolder1">
<input id="467579" type="checkbox" name="467579" />
</div>
<div class="fieldHolder2">
<label for="467579">AgendaHideReached</label>
</div>
</li>
<li class="checkboxLeft" data-id="467580" data-z="3">
<div class="fieldHolder1">
<input id="467580" type="checkbox" name="467580" />
</div>
<div class="fieldHolder2">
<label for="467580">AgendaShowMessage</label>
</div>
</li>
<li class="checkboxLeft" data-id="467584" data-z="4">
<div class="fieldHolder1">
<input id="467584" type="checkbox" name="467584" />
</div>
<div class="fieldHolder2">
<label for="467584">AgendaWaitlist</label>
</div>
</li>
</ol>
</fieldset>
<div class="buttonGroup">
<button type="button" name="ctl00$cph$ctlNavigation$btnAddAnother" class="button" onclick="SubmitForm(this);return false;">Add Another Person</button>
<span class="textBetweenButtons">or</span>
<button type="submit" name="ctl00$cph$ctlNavigation$btnContinue" class="button" onclick="SubmitForm(this);return false;">Continue</button>
</div>
</div>
Here is the essential part of the html page in which I want to locate to that //label element.
Second edit 2012/9/19
Sample C# code using selenium-webdriver to locate that element.
IWebDriver driver = new FirefoxDriver();
IWebElement = driver.FindElement(By.XPath("//div[#id='pageContent']//legend/following-sibling::ol/li/div/label[text()='AgendaShowCapacity (1 remaining)']"));
// Do something to that element

Resources