I'm having a bit of trouble with an xpath select.
I'm currently using C# and Selenium
I'm trying to overcome a problem whereby I need to select a checkbox within a generated table while only knowing a line of text in a preceding-sibling Div. All ID's can change as they are randomly generated.
I want to select class="jqx-checkbox-check-checked" while only knowing the text "testdata"
<div role="row" style="position: relative; height:28px;" id="row1jqxgrid">
<div role="gridcell" style="left: 0px; z-index: 790; width:30px;" class="jqx-grid-cell jqx-item jqx-grid-cell-alt jqx-grid-cell-selected jqx-fill-state-pressed">
<div style="position: absolute; top: 50%; left: 50%; margin-top: -7px; margin-left: -10px; overflow: visible; cursor: auto;" id="jqxWidget3af6ac8d" tabindex="0" class="jqx-widget jqx-checkbox">
<div class="jqx-checkbox-default jqx-fill-state-normal jqx-rc-all">
<div style="width: 13px; height: 13px;"><span style="width: 13px; height: 13px;" class="jqx-checkbox-check-checked"></span></div>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div role="gridcell" style="left: 30px; z-index: 789; width:25px;display: none;" class="jqx-grid-cell"></div>
<div role="gridcell" style="left: 30px; z-index: 789; width:200px;" class="jqx-grid-cell jqx-item jqx-grid-cell-alt jqx-grid-cell-selected jqx-fill-state-pressed">
<div class="jqx-grid-cell-left-align" style="margin-top: 6px;"><a id="id_01" href="/test/testing?id_01=199">testdata</a></div>
</div>
</div>
You can try to select the row that contains anywhere the string testdata and in that row select the div with the needed class.
A first try would be:
//div[#class='row'][.//div[text()='testdata']]//span[#class='jqx-checkbox-check-checked']
This would be the simplest way.
You can select element with testdata, go to ancestor div and then go to span that you need:
//*[text()='testdata']/ancestor::div[#role='row']//span
You can also specify calss or part of the class of the span you need:
//*[text()='testdata']/ancestor::div[#role='row']//span[contains(#class,'checked')]
//*[text()='testdata']/ancestor::div[#role='row']//span[#class = 'jqx-checkbox-check-checked']
Related
I have a problem to management the iframes in dynamic page
I have a tableview in one iframe when I double-click on row, it's create a new div with iframe you can see the toggle to this iframe in intructions driver.SwitchTo().Frame(frameProduct), after collect data from this frame, I want to continue traverse table rows, but at the final of loop I try to toogle the tableview iframe with driver.SwitchTo().Frame(iframes.ElementAt(1)) and then i have an exception Dynamic page element reference of iframe is no longer attached to the DOM
I cannot toggle from one frame to other frame.
ICollection<IWebElement> iframes = driver.FindElements(By.TagName("iframe"));
// Table frame
driver.SwitchTo().Frame(iframes.ElementAt(1));
element = driver.FindElement(By.XPath("//html"));
string? paths = #"//table[starts-with(#id, 'tableview')]";
ICollection<IWebElement> tableview = element.FindElements(By.XPath(paths));
Actions builder = new Actions(driver);
foreach (IWebElement elements in tableview) {
builder.DoubleClick(elements).Build().Perform();
// result data frame
driver.SwitchTo().ParentFrame();
ICollection<IWebElement> cc = TabPanelCenter.FindElements(By.XPath("./child::*"));
var product = driver.FindElement(By.Id(cc.Last().GetAttribute("id")));
WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
var frameProduct = wait.Until(ExpectedConditions.ElementToBeClickable (product.FindElement(By.TagName("iframe"))));
driver.SwitchTo().Frame(frameProduct);
var registration = driver.FindElement(By.Id("ContentPlaceHolder1_lblRegistrationDate-inputEl"));
Console.WriteLine(registration.Text);
driver.SwitchTo().Frame(iframes.ElementAt(1)); // Exception/Error element reference of iframe is no longer attached to the DOM
}
<div id="TabPanelCenter-body" data-ref="body" class="x-panel-body x-panel-body-default x-panel-body-default x-noborder-trbl" role="presentation" style="width: 1920px; left: 0px; top: 36px; height: 169px;">
<div
class="x-panel x-tabpanel-child x-panel-default x-hidden-offsets"
role="tabpanel"
aria-hidden="true"
aria-disabled="false"
aria-labelledby="tab-1013"
aria-expanded="false"
id="Home"
style="margin: 0px; width: 1284px; height: 778px;"
>
<div id="Home-bodyWrap" data-ref="bodyWrap" class="x-panel-bodyWrap" role="presentation">
<div id="Home-body" data-ref="body" class="x-panel-body x-panel-body-default x-panel-body-default x-noborder-trbl" role="presentation" style="width: 1284px; left: 0px; top: 0px; height: 778px;">
<iframe
class="x-component x-fit-item x-component-default"
id="component-1015"
name="Home_IFrame"
src="/Private/Intranet/Inicio.aspx?_dc=1674059085974"
style="margin: 0px; width: 1284px; height: 778px;"
frameborder="0"
></iframe>
</div>
</div>
</div>
<div
class="x-panel x-tabpanel-child x-panel-default x-closable x-panel-closable x-panel-default-closable x-hidden-offsets"
role="tabpanel"
aria-hidden="true"
aria-disabled="false"
aria-labelledby="tab-1016"
id="Products"
aria-expanded="false"
style="margin: 0px; width: 1284px; height: 778px;"
>
<div id="Products-bodyWrap" data-ref="bodyWrap" class="x-panel-bodyWrap" role="presentation">
<div
id="Products-body"
data-ref="body"
class="x-panel-body x-panel-body-default x-closable x-panel-body-closable x-panel-body-default-closable x-panel-body-default x-panel-body-default-closable x-noborder-trbl"
role="presentation"
style="width: 1284px; height: 778px; left: 0px; top: 0px;"
>
**
<iframe
class="x-component x-fit-item x-component-default"
id="component-1018"
name="Products_IFrame"
src="/Private/Intranet/Products/ProductsList.aspx?_dc=1674059096599"
style="margin: 0px; width: 1284px; height: 778px;"
frameborder="0"
>
</iframe>
**
</div>
</div>
<div
class="x-component x-border-box x-mask x-component-default"
role="progressbar"
aria-hidden="true"
aria-disabled="false"
id="loadmask-1017"
tabindex="0"
data-componentid="loadmask-1017"
style="display: none;"
aria-valuetext="Loading Products..."
>
<div id="loadmask-1017-msgWrapEl" data-ref="msgWrapEl" class="x-mask-msg" role="presentation" style="right: auto; left: 576px; top: 361px;">
<div id="loadmask-1017-msgEl" data-ref="msgEl" class="x-mask-loading x-mask-msg-inner" role="presentation">
<div id="loadmask-1017-msgTextEl" data-ref="msgTextEl" class="x-mask-msg-text" role="presentation">Loading Products...</div>
</div>
</div>
</div>
</div>
<div
class="x-panel x-tabpanel-child x-panel-default x-closable x-panel-closable x-panel-default-closable"
role="tabpanel"
aria-hidden="false"
aria-disabled="false"
aria-labelledby="tab-1019"
id="Edit_product434"
aria-expanded="true"
style="margin: 0px; width: 1920px; height: 169px;"
>
<div id="Edit_product434-bodyWrap" data-ref="bodyWrap" class="x-panel-bodyWrap" role="presentation">
<div
id="Edit_product434-body"
data-ref="body"
class="x-panel-body x-panel-body-default x-closable x-panel-body-closable x-panel-body-default-closable x-panel-body-default x-panel-body-default-closable x-noborder-trbl"
role="presentation"
style="width: 1920px; height: 169px; left: 0px; top: 0px;"
>
**
<iframe
class="x-component x-fit-item x-component-default"
id="component-1021"
name="Edit_product434_IFrame"
src="/Private/Intranet/Products/ProductsForm.aspx?Id=434&TabId=Products&_dc=1674059103654"
style="margin: 0px; width: 1920px; height: 169px;"
frameborder="0"
>
</iframe>
**
</div>
</div>
<div
class="x-component x-border-box x-mask x-component-default"
role="progressbar"
aria-hidden="true"
aria-disabled="false"
id="loadmask-1020"
tabindex="0"
data-componentid="loadmask-1020"
style="display: none;"
aria-valuetext="Loading Edit product..."
>
<div id="loadmask-1020-msgWrapEl" data-ref="msgWrapEl" class="x-mask-msg" role="presentation" style="right: auto; left: 567px; top: 361px;">
<div id="loadmask-1020-msgEl" data-ref="msgEl" class="x-mask-loading x-mask-msg-inner" role="presentation">
<div id="loadmask-1020-msgTextEl" data-ref="msgTextEl" class="x-mask-msg-text" role="presentation">Loading Edit product...</div>
</div>
</div>
</div>
</div>
</div>
I'm trying to figure out something here but not sure whether it's good code practice or if it's possible or not.
I want to change a position of a table cell dynamically.
This is the current code.
<td style="padding-top: 12px; vertical-align: top;" runat="server" id="HomeScreen">
<div class="uc-home-head" style="width: 254px; height: 30px; background: transparent url('/images/home_totalHeader_twitter.png');
margin-bottom: 15px; font-weight: bolder;">
<div style="padding-left: 5px; float: left; margin-top: 10px;"><div style="line-height:10px;">INKWRX Updates</div>
</div>
</div>
<div style="clear: both;">
</div>
<a data-widget-id="345496112829980672" width="254px" data-chrome="noheader nofooter transparent"
class="twitter-timeline" href="https://twitter.com/destinywireless" data-show-replies="false"></a>
</td>
if (CurrentUser.HomeScreenReport)
{
ucErrors.Parent.Controls.Remove(ucErrors);
ActivityBar1.Parent.Controls.Remove(ActivityBar1);
tblTable1.Controls.Remove(tblTable1.Rows[0]);
HomeScreen.Style.Add("bottom", "80px");
}
After removing the controls, I want to re-position the table cell.
When I add style="position: absolute;" in the HTML style and HomeScreen.Style.Add("bottom", "80px"); in c#, the whole row messed up.
Thank you.
Been trying several ways to change the style of a DropDownListFor element. Either I am doing something wrong or there is something overriding it.. I've tried changing it in the view element and in the CSS.. and no go.
View:
<div style="width: 100%; ">
<div style="float: left;"> #Html.DropDownListFor(model => model.FranPID, new SelectList(Model.FranchiseList, "FranchiseID", "FranBusinessName", new { #class = "selectStyle" }))</div>
</div>
CSS:
.selectStyle {
border: 1px solid #93A9C8;
padding: 2px;
font-size: 1em;
color: #444;
width: 200px;
border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
-moz-border-radius: 3px 3px 3px 3px;
-o-border-radius: 3px 3px 3px 3px;
}
EDIT Solved:
Correct Call:
<div style="width: 100%; ">
<div style="float: left;"> #Html.DropDownListFor(model => model.FranPID, new SelectList(Model.FranchiseList, "FranchiseID", "FranBusinessName"), new { #class = "selectStyle" })</div>
</div>
Badsically I had the new inside the SelectList call.. moving it out (changing the parans) and all is working
Well, this is one way...I'd like others to show me if there's a better way because I need to learn more!
in the view:
<div id="products" class="container" >
<div class="row">
<div class="col-lg-10 col-md-5 col-sm-4 dropdownlist">
#Html.LabelFor(m => m.SelectedCategoryId)
#Html.DropDownList("id", Model.CategoryItems, new { #id = "ddlCategories", onchange = "this.form.submit();" })
</div>
</div>
</div>
and in the css:
/* the width of the entire in div of id=product */
#products {
width: 100%;
}
/* any item in the div of id=product with its class having dropdownlist */
#products .dropdownlist{
font-size: 18px;
}
/* any dropdown in product id div */
#products select{
color: blue;
}
/* specifically, any item with id of ddlCategories in the div of id=product */
#products #ddlCategories
{
color: red;
}
Hope this helps.
I have nested divs, I have to show it in same row please help me.
Also tell me how to show the progress bar in the place of label id = "remainingcount" while processing.
Here is my code:
<div class="listbox">
<asp:Label ID="headertext" runat="server" CssClass="labelresul" Font-Bold="true" Height="50" Text="Available Filter"></asp:Label>
<span style="padding-left:10px;font-weight:700;">
<asp:HiddenField runat="server" ID="hdCount" />
<asp:Label ID="Total" runat="server" Height="50"></asp:Label>
</span>
<span style="padding-left:5px;font-weight:700;">
<asp:Label runat="server" ID="match" Visible="false" Text="Matches"></asp:Label>
<asp:Label ID="remainingcount" ForeColor="Red" Visible="false" runat="server"></asp:Label>
<asp:Label ID="remaining" runat="server" ForeColor="Red" Text="Results" Visible="true"></asp:Label>
</span>
<div id="divv">
<asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="updFilters" runat="server" >
<ProgressTemplate>
<center>
<asp:Panel ID="resultspanel" runat="server">
<img alt="Processing" src="Images/waiting_process.gif" />
</asp:Panel>
</center>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</div>
Set both Div style as
.DivStyle{
Display: Inline-block;
}
add this property to both
HTML content :
<div class='container'>
<div class="align-left">left</div>
<div class="align-right">right</div>
</div>
Style as shown below
.container {
width:100%; }
.align-left {
float: left;
width:50%;
}
.align-right{
float: right;
width:50%
}
Set float for the div.
float:left
1st Way
You can use display: inline to put the two div elements inline.
Explanation: div elements are block elements, so their display style is usually display: block.
#box1 {
width: 1005px;
height: 1000px;
padding: 50px;
border: 1px solid red;
margin-left: 162px;
background-color: white;
}
#box2{
width: 280px;
height: 250px;
padding: 10px;
background-color: white;
}
#box1, #box2
{
display:inline;
}
<div id="box1">
</div>
<div id="box2">
</div>
2nd way
You can wrap both the div elements in a span tag.
Explanation: span works the same way as the div, to organize and group elements. The only difference is that span is an inline element, so styling the span will not be needed. The display style of the span element is usually display: inline.
.box2 {
width: 280px;
height: 250px;
padding: 10px;
background-color: white;
}
<span>
<div class="box2">
</div>
<div class="box2">
</div></span>
Note: If the span doesn't work, it means that the content of your div tags cannot fit on one line. You are going to need to resize your div tags if that happens.
Sorry, I used my own example, but if you find the snippets confusing, please ignore them. Thank you for reading my answer! It took quite some time to write this and I hope you find this helpful!
also you can do it with
----CSS----
.main-div{
display: grid;
grid-template-columns: repeat(2, 1fr)
}
----HTML----
<div class="main-div">
<div/>
<div/>
</div>
I am trying to get 3 flexible images to line up horizontally and stay within the confines of their flexible div container which has a flexible background,
the background of the container and the 3 images should all stay in relation to each other positionally so they are always on top of each other. they should get larger and smaller with the size of the browser window but not exceed 800 px in width.
The problem I am having is the background and footer slam to the left and the button divs go right.
My JSFIDDLE
HTML:
<div id="container">
<div id="footer">
<div id="left">
<input type="image" name="MyLeftButton" id="MyLeftButton" class="imgstretch" src="Images/MyLeftImage.png" style="border-width:0px;">
</div>
<div id="middle">
<input type="image" name="MyMiddleButton" id="MyMiddleButton" class="imgstretch" src="Images/MyMiddleImage.png" style="border-width:0px;">
</div>
<div id="right">
<input type="image" name="MyRightButton" id="MyRightButton" class="imgstretch" src="Images/MyRightImage.png" style="border-width:0px;">
</div>
</div>
</div>
CSS:
#container {
margin: 0em auto 0em auto;
width: 100%;
max-width: 800px;
}
#footer {
width: 100%;
max-width: 800px;
max-height: 80px;
float: left;
text-align: center;
position: fixed;
bottom: 0em;
background-color: #009FC1;
}
#left {
float: left;
max-height: 80px;
max-width: 294px;
width: 36%;
margin-left: 20px;
display: inline-block;
background-color: #CCCCCC;
}
#middle {
max-height: 80px;
width: 25%;
float: left;
max-width: 202px;
display: inline-block;
background-color: #889FC1;
}
#right {
max-height: 80px;
max-width: 294px;
width: 36%;
float: left;
display: inline-block;
background-color: #9999DD;
}
.imgstretch {
width:100%;
}
You have a couple of things going on.
1) Footer is set to fixed position, which makes it ignore the parent element and fix itself to the window. I don't know if this is an issue for your layout, but something to note.
2) You have inline styles set on elements that you already have a defined class for. Seems unnecessary.
3) Your dimension calculations are WAY off in relation to your % and px. 36% should be (0.36 * 800) which would come out as 288px, not 294px, and THEN plus a 20px margin.
I've forked your fiddle. http://jsfiddle.net/ZBJPF/8/
html {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
#container {
margin: 0 auto;
width: 100%;
max-width: 800px;
}
#footer {
width: 100%;
max-width: 780px;
max-height: 80px;
margin: 0 auto;
padding-left: 20px;
text-align: center;
position: fixed;
bottom: 0;
background-color: #009FC1;
}
.footer-element-lg {
float: left;
width: 36%;
max-width: 280px;
position: relative;
}
.footer-element-sm {
float: left;
width: 28%;
max-width: 220px;
position: relative;
}
#left {
background-color: #CCCCCC;
}
#middle {
background-color: #889FC1;
}
#right {
background-color: #9999DD;
}
.imgstretch {
width:100%;
border: none;
}
<div id="container">
<div id="footer">
<div id="left" class="footer-element-lg">
<input type="image" name="MyLeftButton" id="MyLeftButton" class="imgstretch" src="Images/MyLeftImage.png">
</div>
<div id="middle" class="footer-element-sm">
<input type="image" name="MyMiddleButton" id="MyMiddleButton" class="imgstretch" src="Images/MyMiddleImage.png">
</div>
<div id="right" class="footer-element-lg">
<input type="image" name="MyRightButton" id="MyRightButton" class="imgstretch" src="Images/MyRightImage.png">
</div>
</div>
</div>
I removed a 20px margin and made the spacing as a 20px padding for continuity sake.