How to click on a parent whose child contains a particular text - selenium-webdriver

I am new to webdriver and I am automating a site. In which I have to find a text on that page and I want to click on its parent div. Can anyone please help?
Below is the HTML code.
<div class="col-md-6 col-sm-6 col-lg-6">
<p>
<strong class="detailShow ng-binding" ng-click="showJobs('NonInvite',item.taskId)"> TEST CR1 START DATE </strong>
</p>
</div>

The easiest way to achieve this is directly using xpath.
You can choose the 'more ugly' way like this:
.//strong[contains(#class,'detailShow')]/../..
Explanation:
/.. - this is how you get the parent element. Having just one, means that you'll get the <p> tag, so to get the <div> you need another one.
Or, you can go in a better manner like this:
.//strong[contains(#class,'detailShow')]/ancestor::div[#class='col-md-6 col-sm-6 col-lg-6']
Explanation:
ancestor::div - this one goes up until and returns all parent that are <div> tags. Since you need only the first <div> parent, you need to specify which one, therefore: ancestor::div[#class='col-md-6 col-sm-6 col-lg-6']
Now, if the bootstrap class is your only identifier, and there is a chance you may be inside a <table> you can also go with ancestor::div[1]

Related

Tampermonkey Remove specific Content

I would like to remove things from the main page but the information I need is stored on the next site. How do I approach this?
This is stored on the first page where I can see all articles and all links in href have different numbers, sometimes numbers and letters.
<div class="NewsArticle">
<div class="featured-content-image">
<a href="/27312/72410214/" rel="bookmark">
<img class="imageclass" referrerpolicy="no-referrer" data-original"https/domainname.com/2021/0/Article01.jpg" src="https/domainname.com/2021/0/Article01.jpg" alt="Article01" style="display: inline;">
<div class="link-overlay"></div>
</a>
<span class"article-views">170392 Views</span>
</div>
This is on the second site where, for example, "military" is stored for whatever reason. Is it possible to remove the articles that contain "military"?
<a title="military" href="/category/military" rel="tag" style="margin-right:3px;margin-bottom:3px;" class="btn btn-info btn-md">military</a>
using jquery you can do something like
$("div").remove()
this selects all the divs and removes them
or you can do
$( "div:contains('military')" ).remove()
this looks at all divs if the divs have military in it it is then removed
IMPORTANT:
Make sure to have
// #require https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js
And declare the variable
/* globals jQuery, $, waitForKeyElements */

Scraping based on "nested property"

After having created a few different spiders I thought I could scrape practically anything, but I've hit a roadblock.
Given the following code snippet:
<div class="col-md-4">
<div class="tab-title">Homepage</div>
<p>
<a target="_blank" rel="nofollow"
href="http://www.bitcoin.org">http://www.bitcoin.org
</a>
</p>
</div>
How would you go about selecting the link that is in within <a ... </a> based on the text within the tab-title div?
The reason that I require that condition is because there are several other links that fit this condition:
response.css('div.col-md-4 a::attr(href)').extract()
My best guess is the following:
response.css('div.col-md-4 div.tab-title:contains("Homepage") a::attr(href)').extract()
Any insights are appreciated! Thank you in advance.
Note: I am using Scrapy.
How about this using XPath:
response.xpath('//div[#class="tab-title" and contains(., "Homepage")]/..//a/#href')
Find a div with class tab-title which contains Homepage inside, then step up to the parent and look for a child on any level.
EDIT:
Using CSS, you should be able to do it like this:
response.css('div.tab-title:contains("Homepage") ~ * a::attr(href)')

Can angular have the same ng-if used several times on the page

I cannot see the issue in my html, but i can get the show/hide to work properly for a portion but not for another portion. It is the same ng-model. I am checking to see if feedback exists, if it does show one area, hide another. It is only working for the checklist. The checklist show and hides properly, but the message needs to display if the checklist is hidden. I know this is really simple, but no idea why it won't showing/hiding but i think it boils down to using feedback.length more then once. Can I do that? I have tried ng-if="feedback.length>0" and also ng-show="feedback.length>0" inside of the div for myMessage. The checklist is the only one that hides.
<div class="col-md-3" id="myMessage" ng-if="feedback.length>0">
<div class="alert alert-success">You have already submitted feedback for this user.</div>
</div>
<div class="col-md-3" id="checkList" ng-if="feedback.length==0">
<div class="row">
<div class="panel panel-default questionHolder2">
<div class="panel-heading"><strong>Thesis</strong></div>
<div class="panel-body">
1. After reading, but looking back at the paper now, can you summarize or paraphrase the author's argument or main point that s/he is trying to convey to the reader?
</div>
</div>
</div>
</div>

How get last result with complex css selector?

<div id="container">
<p>
<div>a</div>
<div>b</div>
<div><span>foo</span>c</div>
</p>
<p>
<div>e</div>
<div>f</div>
</p>
<p>
<div>g</div>
<div><span>foo</span>h</div>
<div>i</div>
</p>
</div>
I would like to get last div which contains foo, ie div with h.
Online test : http://try.jsoup.org/~Ef0KHIiN77L_DANA7e4SpYZSVEM
You can't do this with a selector alone. The best you can do is
#container div:has(span:containsOwn(foo))
but you'll still need to grab the last element separately using .last() after you run the selector.
I would try this, but it is not a pure CSS solution, since you can't select easily the last element of a selection.
Element el = doc.select("div:contains(foo):not(:has(div))").last();
My selector selects all divs that contain "foo" but do not contain any other divs.

Add another custom interpolator in Angularjs

I still want {{1+2}} to be evaluated as normal. But in addition to the normal interpolator, I want to create a custom one that I can program to do whatever I want.
e.g. <p>[[welcome_message]]</p> should be a shortcut for <p>{{'welcome_message' | translate}}</p>, or <p translate="welcome_message"></p>. That way, i18n apps would be much more convenient to write.
Is anything like that possible? I'm currently going through the angular.js source code, but the interpolation system looks pretty complicated(?). Any suggestions?
I created a directive that regex-find-replaces it's innerHTML. Basically, I can rewrite any text into any other text. Here's how I did it:
How do I make angular.js reevaluate / recompile inner html?
Now all I have to do is to place my directive-attribute, "autotranslate", in one of the parent elements of where I want my interpolator to work, and it rewrites it however I want it! :D
<div class="panel panel-default" autotranslate>
<div class="panel-heading">[[WELCOME]]</div>
<div class="panel-body">
[[HELLO_WORLD]
</div>
</div>
becomes
<div class="panel panel-default" autotranslate>
<div class="panel-heading"><span translate="WELCOME"></span></div>
<div class="panel-body">
<span translate="HELLO_WORLD"></span>
</div>
</div>
which does exactly what I wanted.
I don't think that's possible, but if you really want to save some characters you could create a function on your rootScope called t, then call it within your views:
<p>{{ t(welcome_message) }}</p>

Resources