How to construct a locator for the following HTML code? - list

I am learning on the xpath philosophy.
Most of the examples found are, in a way, standard and finding xpath manually could be easy.
In the following HTML code, I am not able to understand how should I find the xpath of Job Duration and then create a list of elements for li items.
<div class="box rounded6">
<h3 class="s_filter_title">Job Duration :</h3>
<ul>
<li><label><input type="checkbox" class="" name="">Contract</label></li>
<li><label><input type="checkbox" class="" name="">Full Time </label></li>
<li><label><input type="checkbox" class="" name="">Part Time </label></li>
<li><label><input type="checkbox" class="" name="">Internship</label></li>
<li><label><input type="checkbox" class="" name="">Temporary</label></li>
<li><label><input type="checkbox" class="" name="">Temp To Perm</label></li>
</ul>
</div>

Here is the xpath that you are looking for.
//h3[.='Job Duration :']/following-sibling::ul/li//input
There are 6 li elements in the ul, you can see the count as 6 in the search list.

To create a List of the <li> elements associated with the element with text as Job Duration you need to identify the element with text as Job Duration first and then locate the following <ul> node and then locate it's child nodes and you can use the following Locator Strategy:
Java based solution:
xpath1:
List<WebElement> myElements = driver.findElements(By.xpath("//h3[text()='Job Duration :']//following::ul[1]//li"));
xpath2:
List<WebElement> myElements = driver.findElements(By.xpath("//h3[contains(., 'Job Duration')]//following::ul[1]//li"));
Python based solution:
xpath1:
my_elements = driver.find_elements_by_xpath("//h3[text()='Job Duration :']//following::ul[1]//li")
xpath2:
my_elements = driver.find_elements_by_xpath("//h3[[contains(., 'Job Duration')]//following::ul[1]//li")

Related

Understrap/Bootstrap: .row-equal-height not working for equal height columns?

I'm trying to make 3 columns in a row equal height. I used row-equal-height, but nothing happens.
Here is my code:
<div class="row row-eq-height">
<div class="col-lg-4 content-block">
<img src="../wp-content/themes/understrap-child/img/Assisted-Living.jpeg" />
<div>
<h2>Assisted Living</h2>
<img class="icon" src="../wp-content/themes/understrap-child/img/icons/assisted-living.png" />
Bridging the gap between seniors needing some help and being unable to care for themselves is the purpose of assisted living facilities...
...
</div>
</div>
<div class="col-lg-4 content-block">
<img src="../wp-content/themes/understrap-child/img/Memory-Care.jpeg" />
<div>
<h2>Memory Care</h2>
<img class="icon" src="../wp-content/themes/understrap-child/img/icons/memory-care.png" />
Enhancing the life of seniors with memory impairment (due to Alzheimer’s, dementia, or aging) is to specifically enhance the dignity and well-being of each resident...
</div>
</div>
<div class="col-lg-4 content-block">
<img src="../wp-content/themes/understrap-child/img/Independent-Living.jpeg" />
<div>
<h2>Independent Living</h2>
<img class="icon" src="../wp-content/themes/understrap-child/img/icons/independent-living.png" />
Engaging in a fulfilling lifestyle is so much more than where you live...
</div>
</div>
Here's the website in progress: https://ciminocarestg.wpengine.com/
It's the column of 3 under the hero (Assisted Living, Memory Care, and Independent Living) that I want to make equal height.
Thank you!
Thanks for sharing the visuals.
Your row-eq-height is working, but is just so happens that your content, within each column, is inside a nested child div element that is not impacted by row-eq-height.
For a quick and easy way to solve the issue, especially if your content is finalized, then add this CSS rule to your site...
.home .content-block div {
min-height:425px;
}
In the future, do either of the following:
If the content in any of your 3 columns expands, just simply adjust that min-height value.
If you don't want to depend on this technique, then pull out the nested divs that are in each column, so that the content is only 1 level deep, not 2.
In either case, UnderStrap is still an excellent choice for a theme and utilizing BootStrap.

Selenium Python XPATH I am trying to find the input tag which has some text in the title attribute

I have a HTML page with some checkboxes with a name beside it. Using XPATH I can locate the checkbox which has the complete text in the title attribute using = to match the complete text.
E.g.
//div[#id="operations_add_process_list_tab_groups_tab_standard_1"]//span//input[#title="CRM : crm"]
I don't want to match the whole text, I would like to find it by using some of the text e.g. I would like to find the checkbox where "CRM" in the title attribute.
I don't want to use "CRM : crm"
Can i use the contains keyword to find where "CRM" is in the title attribute?
I do not know the syntax for this.
I tried: //div[#id="operations_add_process_list_tab_groups_tab_standard_1"]//span//input[#title[contains(text(), CRM : crm")]]
The HTML is:
<div id="operations_add_process_list_tab_groups_tab_standard_1">
<span>
<span>
<span/>
<span>
<span/>
<span style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;empty-cells:show;display:block;">
<input type="checkbox" checked="" title="CRM : crm" tabindex="-1"/>
CRM : crm
</span>
</span>
<span>
<span style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;empty-cells:show;display:block;">
<input type="checkbox" checked="" title="ESCR : escr" tabindex="-1"/>
ESCR : escr
</span>
</span>
<span>
<span style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;empty-cells:show;display:block;">
<input type="checkbox" checked="" title="ORCHARD : orchard" tabindex="-1"/>
ORCHARD : orchard
</span>
</span>
Thanks,
Riaz
The contains is what you are looking for. In your case.
//input‌​[contains(#title, "CRM")]
contains can be used for any attribute and for text in the element as well.

Get XPath of parent

here's code:
<div class="x-form-item " tabindex="-1" role="presentation">
<label class="x-form-item-label" style="width:180px;" for="x-auto-4005-input">Amount split option:</label>
<div id="x-form-el-x-auto-4005" class="x-form-element x-form-el-x-auto-4005" style="padding-left:185px" role="presentation">
<div id="x-auto-4005" class=" x-form-field-wrap x-component x-trigger-wrap-focus" role="combobox" style="width: 240px;">
I would like to access element with id "x-auto-4005", but without using this id. I can see that label element has identifier "Amount split option". How can I access my element using the label? I guess I would have to get XPATH of parent of all the elements?
You can try the following xpath:
"//label[text()='Amount split option:']/following::div[2]"

Magento Filter Page

We want to add a class to the category filter page on a specific attribute.
An example is below, we would like to add a class called "Man" to the DT.
<dt class="even">Manufacturer</dt>
<dd class="even"><ol>
<li>
<input type="checkbox" onclick="$(this).next().click()">
<a onclick="$(this).previous().checked = true;" href="/filter/test">Apple</a>
(1)
</li>
<li>
<input type="checkbox" onclick="$(this).next().click()">
<a onclick="$(this).previous().checked = true;" href="/filter/test/">HTC</a>
(1)
</li>
</ol></dd>
We are trying to add a class, so it would look like the example below:
<dt class="even Man">Manufacturer</dt>
How would this be possible?
There is a file located at:
app/design/frontend/base/default/template/catalog/layer/view.phtml
Here you can put those classes in dt elements based on some if conditions, although it's not a good practice.

Form elements with the same name not accessible using CF MX7

I am using Coldfusion MX7 and have a basic form which can have several elements that are dynamically added to the form. They are given the same name and are all checkboxes. An example of the form is as follows:
<form action="index.cfm?action=index.report" method="post" id="reportForm">
<div class="report my">
<ul class="connectWith ui-sortable" id="fieldListSelect" aria-disabled="false">
<li class="field" id="field_profileFn" style="">
<a class="action" id="action_profileFn" href="index.cfm?action=index.filter.profileFn" style="display: block; ">filter</a>
<label for="profileFn">First Name</label>
<input type="checkbox" name="reportItem" id="profileFn" value="profileFn">
</li>
<li class="field" id="field_profileSn" style="">
<a class="action" id="action_profileSn" href="index.cfm?action=index.filter.profileSn" style="display: block; ">filter</a>
<label for="profileSn">Surname</label>
<input type="checkbox" name="reportItem" id="profileSn" value="profileSn">
</li>
<li class="field" id="field_contactDate" style="">
<a class="action" id="action_contactDate" href="index.cfm?action=index.filter.contactDate" style="display: block; ">filter</a>
<label for="contactDate">Contact date</label>
<input type="checkbox" name="reportItem" id="contactDate" value="contactDate">
</li>
</ul>
</div>
</form>
Once the form is posted I get the following through cfdump:
<table class="cfdump_struct">
<tr><th class="struct" colspan="2" onClick="cfdump_toggleTable(this);" style="cursor:hand;" title="click to collapse">struct</th></tr>
<tr><td class="struct" onClick="cfdump_toggleRow(this);" style="cursor:hand;" title="click to collapse">CONTACTDATE_FROM</td>
<td> Thu May 19 2011 00:00:00 GMT+0100 (GMT Daylight Time) </td></tr>
<tr><td class="struct" onClick="cfdump_toggleRow(this);" style="cursor:hand;" title="click to collapse">CONTACTDATE_TO</td>
<td> Thu May 19 2011 00:00:00 GMT+0100 (GMT Daylight Time) </td></tr>
<tr><td class="struct" onClick="cfdump_toggleRow(this);" style="cursor:hand;" title="click to collapse">FIELDNAMES</td>
<td> REPORTITEM[],CONTACTDATE_FROM,CONTACTDATE_TO </td></tr>
<tr><td class="struct" onClick="cfdump_toggleRow(this);" style="cursor:hand;" title="click to collapse">REPORTITEM[]</td>
<td> profileFn,profileSn,contactDate </td></tr>
</table>
The element REPORTITEM[] is reported and in trying to access this as a variable I get:
<cfset testing = form.reportItem[]>
Invalid CFML construct found on line 6 at column 50.
In trying to access the variable in the way I would expect I get the following:
<cfset testing = form.reportItem>
Element REPORTITEM is undefined in FORM.
I have inherited this code and it MUST have worked previously. Coldfusion has not been upgraded (obviously being CF 7 still) and nothing else has changed server side that I can think of.
My questions:
Is this just a limitation of CF7?
This should work right or is this totally wrong?
I am going to have to re-write quite a bit of this code if this just doesn't work, handling this after the data has been posted would be easier to code. Modifying the form will be more effort, so is it possible?
Try doing
<cfset testing = form["reportItem[]"]>
This will fetch the form struct by the key "reportItem[]".
As far as I know, CF7 has no problem with this. In fact, I'm pretty sure that the value of your checkboxes is constructed by the browser, not the webserver or CF.
Here's what I see:
form.variableNamve[]
will not work, because the value is coming back as a comma-delimited list.
You will run into the not defined error if no checkboxes are checked, because if no checkboxes with that name are checked then that variable will not be submitted by the browser, and therefore will not exist in the form scope. You should default this, and there are a couple of ways to do it.
You can create a new struct with the checkbox name as a key, the empty string as the value, then structAppend the form scope on top of it.
You can use the traditional cfparam tag.
You can add a hidden form field with the same name and the empty string as a value to the form. This forces the browser to return the form field, even if no checkboxes are checked.
HTH.
Are you posting through jQuery ajax or using normal submit button. I think jQuery add variablename[] while posting it but there is way to disable it. But in case of submit button I will get checkbox only in form structure only if atleast one checkbox is checked.
In this case always cfparam checkbox name with your default value.