Selenium modal Xpath can't Locate - html

I need to select this input
`(name="BtnOK" value="TAMAM" class="BoxButtonOK")`
with xpath after this modal popup. I can't use .FindByClass because there are same classes in the main page, but I need open which in (id="__LIGHTBOX__") modal, and when I use xpath sometimes it gives me error "cant locate element" and oddly sometimes it works.
Here is my code for xpath (and yes I already tried wait.until and no progress):
//div[contains(#id, 'LIGHTBOX')]//input[#name='BtnNext' and contains(#class, 'NavigationButtonNextLightBox')]
And here is modal:
<div id="__LIGHTBOX__" style="overflow: visible; padding: 0px; width: auto; min-height: 143px; max-height: none; height: auto;" class="ui-dialog-content ui-widget-content" >
<div class="__BOX__">
<input name="BtnClose" class="BoxButtonClose" type="button">
<div>
<img src="/Content/themes/base/images/popup-bg-top.png">
</div>
<div class="popupCapsule clearFix">
<div class="banner clearFix">
<h1 class="pageTitle">Fatura Ödeme</h1>
</div>
<div class="noteCapsulePopupContainer">
<div>
<img src="/Content/themes/base/images/note-capsule-top-success.png">
</div>
<div class="noteCapsulePopup">
<table>
<tbody>
<tr>
<td class="waitingTd"></td>
<td>
<p id="TransactionFlowNote">
<span>
<span class="important">10177202-1 (Beşyüzevler Şube)</span> adlı hesabımdan <span class="important">27,50 TL</span> tutarındaki <span class="important">5387373484</span> abone numarasına ait <span class="important">TURKCELL</span> faturası kurumuna iletildi, borcunuz kısa süre içerisinde tahsil edilecektir.
</span>
</p>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<img src="/Content/themes/base/images/note-capsule-sub.png">
</div>
</div>
<table class="popupButtonArea">
<tbody>
<tr>
<td class="left"></td>
<td class="right">
<input name="BtnSlip" value="DEKONT" class="popupOpenLink" style="margin-right: 5px;" href="/Slip/Index/201504220001012380000019284/" type="button"><input name="BtnPeopleAndPlaces" value="İŞLEMİ KAYDET" class="popupOpenLink ButtonWide2" style="margin-right: 5px;" href="/PeopleAndPlaces/SaveTransaction/201504220001012380000019284/1238/False" type="button">
<input name="BtnOK" value="TAMAM" class="BoxButtonOK" type="button">
</td>
</tr>
</tbody>
</table>
</div>
<div>
<img src="/Content/themes/base/images/popup-bg-sub.png">
</div>
</div>

Select by name:
WebElement btnNext = driver().findElement(By.name("BtnOK"));

Selected by Xpath
WebElement btnNext = driver().findElement(By.Xpath("//input[#name='BtnOK']"));

Related

html page arrange correctly only after reload

I am working with angular, html and css.
I build a widget that includes a table of 3*3.
For some reason, in the first upload - the table takes only 50 percent from the widget width.
It looks OK only after reload.
Does someone have an idea what could be the problem?
<div widget class="card">
<div class="card-header">
<span>Select service(s)</span>
<div class="widget-controls">
<a data-widgster="expand" href="#" class="transition"><i class="fa fa-chevron-down"></i></a>
<a data-widgster="collapse" href="#" class="transition"><i class="fa fa-chevron-up"></i></a>
<a data-widgster="fullscreen" href="#" class="transition"><i class="fa fa-expand"></i></a>
<a data-widgster="restore" href="#" class="transition"><i class="fa fa-compress"></i></a>
</div>
</div>
<table id="serviceTable">
<tr *ngFor="let eachService of [0,1,2]; let i = index">
<td *ngFor="let j of [0,1,2]" class="service-td" >
<div>
<input name="checkboxes" type="checkbox" (change)="changeListener($event, i+j)">
<span>osnat11111111</span>
</div>
</td>
</tr>
</table>
<br>
</div>
</div>
The css is:
.service-td
{
table-layout:fixed;
width:10vw;
overflow:hidden;
padding: 0.5vw;
}
Thanks,
Osnat
You can just try,
...
<div style = "width: 100%">
<table> ... </table>
</div>
width: 100% gives the same width of the CSS component to the child

Can I change visibility of button (<div class="btn export-btn") in outer div style class?

For example, I have a code:
<div class="mycontainer1" style="....">
<table class="widget title list" id="element-545">
<tbody>
<tr>
<td class="txt">11111</td>
<td class="toolbar" id="element-546">
<div class="btn export-btn" id="element-549">
<span class="fa fa-print"></span>Export
</div>
</td>
</tr>
</tbody>
</table>
</div>
I need set style for class "btn export-btn" visibility: hidden in css.
Can I resolve it in class of first div (mycontainer1)?
Touch only the first div!
Add
.mycontainer1 .btn.export-btn {
<style>
.mycontainer1 .btn.export-btn
{
visibility: hidden;
}
</style>

Arrange my list of products in rows

I am currently learning asp.net mvc stuffs and multiple trial and error on designing my product page, I am lost on how to arrange my product in row. As currently it stacks vertical 1 after another like
e.g
Product 1
Product 2
Product 3
Product 4
Where instead i wanted to make it like
e.g
Product 1 Product 2 Product 3 Product 4
This is the area which I think I should be changing but I've tried multiple things such as inline-block, float:left but there's no change
Here is my code for the product section, any help on how it can arrange by like 4 by 3 as there are 12 products only as I am currently learning.
Thank you in advance!
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<h2 class="panel-title" style="font-size:24px"><strong>Products</strong></h2>
</div>
<div class="panel-body">
<div class="col-md-4">
<table cellpadding="10" data-bind="foreach: contactLens">
<tr>
<td >
<div class="entire-package">
<img width="255" height="190" data-bind="attr: { src: 'data:image/jpeg;base64,'+ Image }" />
<div class="detail-design">
<strong><span data-bind="text: Name"></span></strong> <br />
Type: <span data-bind="text: Type"></span><br />
Brand: <span data-bind="text: Brand"></span> <br />
Price: <span data-bind="text: Price"></span> <br />
Amount: <span data-bind="text: Amount"></span> <br />
Details
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="alert alert-danger" data-bind="visible: error"><p data-bind="text: error"></p></div>
</div>
Here is an example how it could look like.
<html>
<body>
<table style="width:50%">
<tr>
<th>Product</th>
<th>Brand</th>
<th>Price</th>
<th>Amount</th>
</tr>
<tr>
<td>Name</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
</tr>
</table>
</body>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse; }
th, td {
padding: 5px;
text-align: left; }
</style>

How to click a dropdown arrow in extJS using Python and Selenium?

The full HTML code for the table is as follows:
<table id="clearablecombo-1497" class="x-field clearableCombo x-form-item x-field-default x-anchor-form-item" cellpadding="0" style="table-layout: fixed; width: 287px;">
<tbody>
<tr id="clearablecombo-1497-inputRow">
<td id="clearablecombo-1497-labelCell" class="x-field-label-cell" width="105" valign="top" halign="right" style="">
<label id="clearablecombo-1497-labelEl" class="x-form-item-label x-form-item-label-right" style="width:100px;margin-right:5px;" for="clearablecombo-1497-inputEl">Document Status:</label>
</td>
<td id="clearablecombo-1497-bodyEl" class="x-form-item-body x-form-trigger-wrap-focus" colspan="2" role="presentation" style="width: 100%;">
<table id="clearablecombo-1497-triggerWrap" class="x-form-trigger-wrap" cellspacing="0" cellpadding="0" style="width: 100%; table-layout: fixed;">
<tbody>
<tr>
<td id="clearablecombo-1497-inputCell" class="x-form-trigger-input-cell" style="width: 100%;">
<div id="ext-gen1890" class="x-hide-display x-form-data-hidden" role="presentation"/>
<input id="clearablecombo-1497-inputEl" class="x-form-field x-form-text x-form-focus x-field-form-focus x-field-default-form-focus" type="text" style="width: 100%; text-transform: uppercase; -moz-user-select: text;" name="documentStatus" autocomplete="off" aria-invalid="false"/>
</td>
<td id="ext-gen1888" class="x-trigger-cell" valign="top" style="width:26px">
<div id="ext-gen1886" class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-unselectable x-form-trigger-over x-form-arrow-trigger-over" role="button" style="-moz-user-select: none;"/>
</td>
<td id="ext-gen1889" class="x-trigger-cell" valign="top" style="width:26px">
<div id="ext-gen1887" class="x-trigger-index-1 x-form-trigger x-form-clear-trigger x-form-trigger-last x-unselectable" role="button" style="-moz-user-select: none;"/>
</td>
</tr>
</tbody>
</table>
</td>
<td id="clearablecombo-1497-errorEl" class="x-form-error-msg x-external-error-icon x-form-invalid-icon" width="0" style="display:none" data-errorqtip=""/>
</tr>
</tbody>
</table>
The part of the HTML I'm attempting to manipulate is this part specifically:
<div id="ext-gen1886" class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-unselectable x-form-trigger-over x-form-arrow-trigger-over" role="button" style="-moz-user-select: none;"/>
The above part is the actual dropdown arrow which is also in the above large portion of the HTML. The drop down text I need to select is "Rejected". The HTML with the selection options are as follows:
<div id="boundlist-1558" class="x-boundlist x-boundlist-floating x-layer x-boundlist-default" tabindex="-1" style="left: 136px; top: 346px; height: auto; z-index: 19001; width: 182px;">
<div id="boundlist-1558-listEl" class="x-boundlist-list-ct" style="overflow: auto; height: auto;">
<ul>
<li class="x-boundlist-item x-boundlist-item-over" role="option">All</li>
<li class="x-boundlist-item" role="option">Waiting QA</li>
<li class="x-boundlist-item" role="option">AutoTec Approved</li>
<li class="x-boundlist-item" role="option">User Approved</li>
<li class="x-boundlist-item" role="option">Rejected</li>
<li class="x-boundlist-item" role="option">Deleted</li>
</ul>
</div>
</div>
Anyone have any suggestions of the XPath I would use to do this? I tried just inputting the text like a textbox, however there are certain boxes such as the Country and State that have to be selected to enable each other.
I think 'role' is the best attr in this case to find the elements:
--this one select your desired element
"//div[contains(id, 'ext-gen')][#role='button'][contains(#class, 'x-form-trigger-over')]"
--this one select your desired option
"//li[#role='option'][text()='Rejected']"
As I understand these are the target elements:
xpath = '//div[contains(id, "ext-gen")][#class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-unselectable x-form-trigger-over x-form-arrow-trigger-over"]'
drop_down = self.driver.find_element_by_xpath(xpath)
drop_down.click()
xpath = '//li[#class="x-boundlist-item"][contains(text(), "Rejected")]'
option = self.driver.find_element_by_xpath(xpath)
option.click()

Using a Perl regex to print multi-line patterns from an HTML file

I have an HTML file. Here is a sample
<div class="criteria" style="padding-left:0;font-style:italic"> You searched for:
<span title="A*" >Individual: <span><b>A*</b></span></span>
</div>
</td>
</tr>
</table>
<table cellpadding="5" cellspacing="0" border="0" style="border-collapse: collapse; width: 100%">
<tr class="ListItemColorNew">
<td style="width:50%">
<div class="gvListItemStyle">
<span class="LargeText15">JAMES BOND A'MONEYPENNY </span> (LIC# 1111111)
<div class="GrayTextShade"><i>Alternate Names: BOND JAMES</i></div>
<div class="GrayTextShade">
GREY TIDE LLC (LIC# 2222)
</div>
</div>
</td>
<td style="width:50%">
<div class="gvListItemStyle">
<span class="LargeText15">FRANK WHITE A'SMALLS </span> (LIC# 1111111)
<div class="GrayTextShade"><i>Alternate Names: JAMES SMALLS</i></div>
<div class="GrayTextShade">
WEST RIVER CORP LLC (LIC# 3333)
</div>
</div>
</td>
<td style="width: 25%; vertical-align: top">
<div class="gvListItemStyle">
<div><img alt="help" src=\'/Content/images/BrokerCheck/icon-blueCheck.png\' style=\'vertical-align:top;padding-right:5px\' />Broker</div>
</div>
</td>
<td style="width:25%;text-align:right;vertical-align:top">
<div class="gvListItemStyle">
<a class="btn btn-primary" href="/Individual/Summary/5820616">Details »</a> </div>
</td>
</tr>
I'm trying to extract everything between <td style="width:50%"> and </td>. The data is stored in a file testFile.txt.
This is the Perl code I used
system("perl -pi.bak -e '/^<td style=\"width:50%\">.+<\\/td>/mg' testFile.txt";
Your below code isn't actually doing anything:
system("perl -pi.bak -e '/^<td style=\"width:50%\">.+<\\/td>/mg' testFile.txt");
You're matching m// in a void context with no captures, so the executed statement is meaningless.
Your pattern will never match your content because:
a. You're using the any character ., but it won't match newlines unless you use the /s Modifier.
b. You're using -p for line by line processing of the file, but your pattern would need to span lines in order to match.
The following demonstrates both a regex solution (not recommended) and using an actual HTML Parser, in this case Mojo::DOM. For a helpful 8 minute introductory video, check out Mojocast Episode 5
use strict;
use warnings;
use Mojo::DOM;
my $data = do { local $/; <DATA> };
# Regex Solution:
if ( $data =~ m{<td style="width:50%">(.*?)</td>}s ) {
print "Regex Solution:\n$1";
} else {
warn "No pattern match found";
}
# Parser Solution:
my $dom = Mojo::DOM->new($data);
my $yourtd = $dom->at(q{td[style="width:50%"]})->content;
print "\nMojo::DOM:\n", $yourtd;
__DATA__
<html>
<head>
<title>Hello World</title>
</head>
<body>
<table>
<tr>
</td>
<div class="criteria" style="padding-left:0;font-style:italic"> You searched for:
<span title="A*" >Individual: <span><b>A*</b></span></span>
</div>
</td>
</tr>
</table>
<table cellpadding="5" cellspacing="0" border="0" style="border-collapse: collapse; width: 100%">
<tr class="ListItemColorNew">
<td style="width:50%">
<div class="gvListItemStyle">
<span class="LargeText15">JAMES BOND A'MONEYPENNY </span> (LIC# 1111111)
<div class="GrayTextShade"><i>Alternate Names: BOND JAMES</i></div>
<div class="GrayTextShade">
GREY TIDE LLC (LIC# 2222)
</div>
</div>
</td>
<td style="width: 25%; vertical-align: top">
<div class="gvListItemStyle">
<div><img alt="help" src=\'/Content/images/BrokerCheck/icon-blueCheck.png\' style=\'vertical-align:top;padding-right:5px\' />Broker</div>
</div>
</td>
<td style="width:25%;text-align:right;vertical-align:top">
<div class="gvListItemStyle">
<a class="btn btn-primary" href="/Individual/Summary/5820616">Details »</a> </div>
</td>
</tr>
<table>
</body>
</html>
Outputs:
Regex Solution:
<div class="gvListItemStyle">
<span class="LargeText15">JAMES BOND A'MONEYPENNY </span> (LIC# 1111111)
<div class="GrayTextShade"><i>Alternate Names: BOND JAMES</i></div>
<div class="GrayTextShade">
GREY TIDE LLC (LIC# 2222)
</div>
</div>
Mojo::DOM:
<div class="gvListItemStyle">
<span class="LargeText15">JAMES BOND A'MONEYPENNY </span> (LIC# 1111111)
<div class="GrayTextShade"><i>Alternate Names: BOND JAMES</i></div>
<div class="GrayTextShade">
GREY TIDE LLC (LIC# 2222)
</div>
</div>
.*?(<td style="width:50%">((?!<\/td>).)*?<\/td>)
See demo.Use gs flags.
See demo.
http://regex101.com/r/oC3nN4/15
As said in the comments, remove the ^ in your regexp.
Also, use /s instead of /mg if you want to treat the file content as a single line string which allows '.' pattern to allow match new line characters '\n'.
/<td style=\"width:50%\">.+?<\\/td>/s
.+? while stop the matching at the first occurrence of </td>, not the last
I hope you've seen previous advice to avoid regexes to process HTML? It's really true! The only excuse I can think of for avoiding one of the several excellent HTML modules is that your data is so malformed that nothing else will process it.
Your "sample" of your HTML file is particularly unhelpful. Before I fixed the indentation the lines were scattered all over the place. After I looked at it I saw that it was the end of one table element followed by the start of another, so it left several elements unbalanced and either closed but not opened or vice-versa. Please don't do that to us.
I built a well-formed HTML file that contains your extract, and this is a program that will process it that uses HTML::TreeBuilder
use strict;
use warnings;
use HTML::TreeBuilder;
my $tree = HTML::TreeBuilder->new_from_file('html.html');
my #td50 = $tree->look_down(_tag => 'td', style => 'width:50%');
print $_->as_HTML('<>&', ' '), "\n\n" for #td50;
output
<td style="width:50%">
<div class="gvListItemStyle"><span class="LargeText15">JAMES BOND A'MONEYPENNY </span> (LIC# 1111111) <div class="GrayTextShade"><i>Alternate Names: BOND JAMES</i></div>
<div class="GrayTextShade"> GREY TIDE LLC (LIC# 2222) </div>
</div>
</td>
In case you or others need it, here's the HTML input document that I used
<html>
<body>
<table>
<tr>
<td>
<div class="criteria" style="padding-left:0;font-style:italic"> You searched for:
<span title="A*" >Individual: <span><b>A*</b></span></span>
</div>
</td>
</tr>
</table>
<table cellpadding="5" cellspacing="0" border="0" style="border-collapse: collapse; width: 100%">
<tr class="ListItemColorNew">
<td style="width:50%">
<div class="gvListItemStyle">
<span class="LargeText15">JAMES BOND A'MONEYPENNY </span> (LIC# 1111111)
<div class="GrayTextShade"><i>Alternate Names: BOND JAMES</i></div>
<div class="GrayTextShade">
GREY TIDE LLC (LIC# 2222)
</div>
</div>
</td>
<td style="width: 25%; vertical-align: top">
<div class="gvListItemStyle">
<div><img alt="help" src=\'/Content/images/BrokerCheck/icon-blueCheck.png\' style=\'vertical-align:top;padding-right:5px\' />Broker</div>
</div>
</td>
<td style="width:25%;text-align:right;vertical-align:top">
<div class="gvListItemStyle">
<a class="btn btn-primary" href="/Individual/Summary/5820616">Details »</a> </div>
</td>
</tr>
</table>
</body>
</html>