I tried different ways to identify the nested frame using page-object i tried like
in_iframe(index: 1) do |frame|..end and i tried with id & class as well but no luck
<div id="tabsWrapper">
<table id="defaultTabs" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="tabContentCell">
<div id="tabContentContainer" style="height: 443px;">
<a id="top" name="top"></a>
<div id="tabDefaultContent"> </div>
<div id="tab14036918566282Content" class="tabContent" style="display: none;">
<iframe id="tab14036918566282Frame" class="portal xicSeamlessUI" width="100%" height="716px" frameborder="0" "="" name="tab14036918566282Frame" marginheight="0" marginwidth="0" src="/mywork/ptl/secure/defaultportal" style="height: 443px;">
<!DOCTYPE html>
<html class="ltr yui3-js-enabled gecko ltr js firefox firefox24 firefox24-0 win secure" lang="en-US" dir="ltr">
</iframe>
</div>
<div id="tab14036918654673Content" class="tabContent">
<iframe id="tab14036918654673Frame" class="portal xicSeamlessUI" width="100%" height="716px" frameborder="0" "="" name="tab14036918654673Frame" marginheight="0" marginwidth="0" src="/ncs/secure/jas/create" style="height: 443px;">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<body class="browserFF browserFF3 Init">
<div class="xicSeamlessUI" xic:app="Create" xic:title="Create">
<span id="bFeedback" class="feedback"> </span>
<div id="confirmationWindow69" xic:width="50%">
<div id="contentModalWindow6c" xic:width="50%">
<input id="hiddenText" class="xicInputText" type="text" size="1" style="visibility:hidden" name="hiddenText">
<input id="hiddenCheckBox" type="checkbox" onclick="var wcall=wicketAjaxPost('?wicket:interface=:0:hiddenCheckBox::IBehaviorListener:0:', wicketSerialize(Wicket.$('hiddenCheckBox')),null,null, function() {return Wicket.$('hiddenCheckBox') != null;}.bind(this));" name="hiddenCheckBox" style="visibility: hidden">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="83%"> </td>
<td width="17%" align="right" nowrap="nowrap">
<label id="categoryDescription65">Select Category: </label>
<span id="categoryDescriptionDropDown66">
<div class="xicInputWrapper xicInputWrapperSelect">
<select id="cellDropDown67" class="xicSmartSelectLoaded" name="categoryDescriptionDropDown:cellDropDown" onchange=".page.showPleaseWait('Processing...');var wcall=wicketAjaxPost('?wicket:interface=:0:categoryDescriptionDropDown:cellDropDown::IBehaviorListener:0:', wicketSerialize(Wicket.$('cellDropDown67')),null,null, function() {return Wicket.$('cellDropDown67') != null;}.bind(this));">
<option value="0" selected="selected">New</option>
<option value="1">Basic</option>
<option value="2">Advanced</option>
<option value="3">Premium</option>
<option value="4">Other</option>
</select>
</div>
</span>
</td>
</tr>
<tr>
<tr>
<tr>
</tbody>
</table>
<div id="myPleaseWait22" class="xicPleaseWait xicFullPageZIndex" style="z-index: 2000; display: none;">
</div>
<div id="PleaseWait" class="xicPleaseWait xicFullPageZIndex" style="z-index: 6000; display: none;">
</body>
</html>
</iframe>
</div>
</div>
</td>
</tr>
<tr>
</tbody>
</table>
Here, there are two frames 1 is active and other hidden.
Exception:
timed out after 30 seconds, waiting for {:css=>"select[name*='Description']", :tag_name=>"select"} to become present (Watir::Wait::TimeoutError)
This seems to me an IEDriver issue when i tried with firefox and chrome it is working fine
Explicitly switching to the frame in question worked for me.
First you switch to the frame and once you are done working inside the frame don't forget to return to your default content:
driver.switch_to.frame "frameName"
Do your stuff within IFrame
driver.switch_to.default_content
To find the solution the selenium docs were helpful as well as a this post about handling Iframes with selenium webdriver.
Related
I have a spring boot app that uses thyemeleaf for html and boostrap for design.
I'm looking for a table that can do the following functions
Sort option in the header. Upon clicking it sort all rows according to the value of the particular col
Allow search of values in one particular row
Limit the rows showed in page. E.g. page 1 shows 30 rows, clicking on 2 shows 30 rows
I looked around and saw usage of Javascript but I'm not sure how to use Javascript. Any help if appreciated!
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<title>Home</title>
</head>
<body>
<div class="jumbotron">
<h1 class="display-4">Coronavius tracker application</h1>
<p class="lead">This application tracks the coronavirus situation around the globe</p>
<hr class="my-4">
<div class="container">
<div class="row">
<div class="col">
<h3>
<p class="font-weight-bold">Total world cases</p>
<!-- p tag takes up the entire width -->
<p class="font-weight-bold" th:text="${worldCases}"></p>
</h3>
</div>
<div class="col">
<h3>
<p class="font-weight-bold">Total world deaths</p>
<p class="font-weight-bold"th:text="${worldDeaths}"></p>
</h3>
</div>
<div class="col">
<h3>
<p class="font-weight-bold">World population</p>
<p class="font-weight-bold" th:text="${worldPop}"></p>
</h3>
</div>
</div>
</div>
</div>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">County</th>
<th scope="col">Total cases</th>
<th scope="col">New cases</th>
<th scope="col">Total deaths</th>
<th scope="col">Population</th>
</tr>
</thead>
<tbody>
<tr th:each="item :${alldata}">
<td th:text="${item.country}"></td>
<td th:text="${item.totalCases}"></td>
<td th:text="${item.newCases}"></td>
<td th:text="${item.totalDeaths}"></td>
<td th:text="${item.pop}"></td>
</tr>
</tbody>
</table>
</body>
</html>
Using datatables, I was able to get the table with the desired function. My code is as attached
<!DOCTYPE html>
<!-- To use thymeleaf -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready( function () {
$('#dataTable').DataTable();
} );
</script>
<title>Home</title>
</head>
<body>
<!-- Creates a big gray field -->
<div class="jumbotron">
<!-- Big words -->
<h1 class="display-4">Coronavirus tracker</h1>
<!-- Big words description -->
<p class="lead">Tracking this pandemic one at a time</p>
<!-- Marks bottom part of jumbotron -->
<hr class="my-4">
<div class="container">
<!-- Gride layout with each col detonated by class ="col" -->
<div class="row">
<div class="col">
<h3>
<p class="font-weight-bold">Total world cases</p>
<!-- p tag takes up the entire width -->
<p class="font-weight-bold" th:text="${worldCases}"></p>
<p class="font-weight-bold" th:text="${percentage}"></p>
</h3>
</div>
<div class="col">
<h3>
<p class="font-weight-bold">Total world deaths</p>
<p class="font-weight-bold"th:text="${worldDeaths}"></p>
</h3>
</div>
<div class="col">
<h3>
<p class="font-weight-bold">World population</p>
<div class="font-weight-bold" th:text="${worldPop}"></div>
</h3>
</div>
</div>
</div>
</div>
<!-- #id give id to the table and match the javascript
#page-length to match the default entries per page
#data-order to set the default way to display order. It is now 1st col in descending order -->
<table class="table table-striped" id="dataTable" data-page-length='50' data-order='[[1, "desc"]]'>
<thead>
<tr>
<th scope="col">County</th>
<th scope="col">Total cases</th>
<th scope="col">New cases</th>
<th scope="col">Total deaths</th>
<th scope="col">Population</th>
</tr>
</thead>
<tbody>
<tr th:each="item :${alldata}">
<td th:text="${item.country}"></td>
<td th:text="${item.totalCases}"></td>
<td th:text="${item.newCases}"></td>
<td th:text="${item.totalDeaths}"></td>
<td th:text="${item.pop}"></td>
</tr>
</tbody>
</table>
</body>
</html>
for the life of me, I cannot get the xpath of this....
i think the problem is that there are two divs one, called 'div_settings_A' and 'div_settings_C', in the example below you cant see the 'div_settings_C' because its hidden, just cant put my finger on why it wont work!
I have tried
//div[contains(#id, 'div_settings_A')]/input
//tr[#id='inputSavePaymentAccounts'] and td[#name='payAck']
<iframe id="ccPayWiz" class="ui-dialog-content ui-widget-content" src="ccxPaymentDetails.php?c=1805&a=733344&d=null&m=Automation#billtrust.com&b=768866910" style="width: 99%; min-height: 105.833px; height: 717px; position: relative;" scrolltop="0" scrollleft="0">
<!DOCTYPE html>
<html>
<head>
<body style="border: 0px; margin: 0px; padding: 0px;" onload="setuppanes('IG');">
<input id="wpsURL" type="hidden" value="WPS_URL">
<form id="frmPay" onsubmit="return paywizAccountHelper.validateForm(this, '17', 'US');" action="ccProcessPayment.php" method="post" name="frmPay">
<input type="hidden" name="csrf" value="e5297f08b85318aa2ec176a5d8fac2a2">
<div id="divPayWizard2">
<div style="float:left; margin-top:5px">
<ul class="steps ui-widget ui-helper-clearfix">
<li>
<li>
<li>
</ul>
</div>
<br clear="all">
<hr>
<p>
<span class="cc-font"> Enter the customer's billing information to process the payment.</span>
</p>
<div id="divpane1">
<table id="tablepane1" class="cc-pane1-table cc-font">
<br>
</div>
<div id="divpane2">
<table class="cc-pane2-table-top cc-font">
</div>
<div id="div_settings_A" style="display: block;">
<input type="hidden" value="733344" name="SrchAcctNum">
<table class="cc-font" width="700" cellspacing="3" border="0">
<input id="BankCountry" type="hidden" value="US" name="BankCountry">
<tbody>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr id="inputSavePaymentAccounts" class="savePaymentAccounts" style="display: table-row;">
<td class="addCCLabel" style="padding-top: 15px">Save this Payment Method</td>
<td style="padding-top: 15px">
<input class="payAck" type="checkbox" name="payAck" style="margin: 0; padding 0" tabindex="9">
</td>
</tr>
You can directly get that ccheck box element by using name attribute as :
.//input[#type = 'checkbox' and #name = 'payAck']
Or if there are multiple check boxes with the same name then try using descendant of tr as :
.//tr[#id = 'inputSavePaymentAccounts']/descendant::input[#type = 'checkbox' and #name = 'payAck']
Or
.//tr[#id = 'inputSavePaymentAccounts']/descendant::input
Hope it helps...:)
I'm working with some email template design for my company and leveraging off of the Zurb Foundation for Email framework (http://foundation.zurb.com/emails). So far, I've been impressed with it.
The issue that I am having is with an column background that will have different text in it depending on the recipient (dynamic). The background is basically a rounded "button" shape with a transparent "Arrow" on the right hand side. Long story short - I was able to design this so it looked "good" in modern email clients using some tables with some basic CSS.
The issue with this was that my CSS uses "border-radius" and outlook doesn't support that. I found a workaround to this and "simplified" the design for outlook specifically and use the MSO conditional to fire off this simplified design when appropreate. The issue is that it ALWAYS seems to fire - no matter what email client I am using. . . (iPhone, gMail, etc). I think something has to be wrong with the way I am setting up the conditional.
<table class="row center">
<tr>
<td class="wrapper last panel">
<!--[if mso]>
<table class="twelve columns">
<tr>
<td class="one sub-columns">
Gift Code:
</td>
<td class="eleven sub-columns">
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:40px; v-text-anchor:middle; width:500px;" arcsize="20%" stroke="f" fillcolor="#faa21a">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
ZZ1234567890ABCD
</center>
</v:roundrect>
</td>
<td class="expander"></td>
</tr>
</table>
<![endif]-->
<!--[if !mso]>
<!-- -->
<table class="twelve columns" style="mso-hide:all;">
<tr>
<td class="one sub-columns">
Gift Code:
</td>
<td class="nine sub-columns promoCalloutInner alOrangeBg" style="mso-hide:all;">
ZZ1234567890ABCD
</td>
<td class="four sub-columns alOrangeBg promoCalloutInnerEnd" style="mso-hide:all;">
<img src="http://mcbain.gamelogic.com/~rdesroches/ALCEmailTemplates/images/transparentArrow.png" />
</td>
<td class="expander"></td>
</tr>
</table>
<!-- <![endif]-->
</td>
</tr>
</table>
I am using the Zurb Inliner tool (http://foundation.zurb.com/emails/inliner.html) to inline all the styles from my CSS.
Any ideas?
It looks like your non-Outlook conditional content (<!--[if !mso]>) isn't closing correctly.
Try this and let me know how you get on
<table class="row center">
<tr>
<td class="wrapper last panel">
<!--[if mso]>
<table class="twelve columns">
<tr>
<td class="one sub-columns">
Gift Code:
</td>
<td class="eleven sub-columns">
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:40px; v-text-anchor:middle; width:500px;" arcsize="20%" stroke="f" fillcolor="#faa21a">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
ZZ1234567890ABCD
</center>
</v:roundrect>
</td>
<td class="expander"></td>
</tr>
</table>
<![endif]-->
<!--[if !mso]><!-->
<table class="twelve columns" style="mso-hide:all;">
<tr>
<td class="one sub-columns">
Gift Code:
</td>
<td class="nine sub-columns promoCalloutInner alOrangeBg" style="mso-hide:all;">
ZZ1234567890ABCD
</td>
<td class="four sub-columns alOrangeBg promoCalloutInnerEnd" style="mso-hide:all;">
<img src="http://mcbain.gamelogic.com/~rdesroches/ALCEmailTemplates/images/transparentArrow.png" />
</td>
<td class="expander"></td>
</tr>
</table>
<!--<![endif]-->
</td>
</tr>
</table>
What I changed:
<!--[if !mso]>
<!-- -->
to
<!--[if !mso]><!-->
and
<!-- <![endif]-->
to
<!--<![endif]-->
I want to make a newsletter template for mailchimp & campaign monitor ..
I know in newsletters we have to use table layout and inline styles and i have already done that in my template but i wonder if there are any specific rules i must follow to make my template valid for mailchimp & campaign monitor ?? or just use the following html for the both ??
This is my code :
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<table width="100%" align="center" bgcolor="#ebebeb">
<tbody>
<tr>
<td>
<table width="600px" align="center" bgcolor="#FFFFFF">
<tbody>
<tr align="center">
<td style="padding:9px 18px;color:#696969;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:13px;text-align:left;line-height:150%">
<p><span style="font-weight: bold;">Hello friend,</span><br /><br />
Why you make everything from scratch?! Now you can find thousands of full source code on the internet and save your time. Here you can find some awesome of them for your upcoming apps! </p>
<p align="left" style="font-weight: bold;">Don't re-invent the wheel!</p>
<p align="right" style="font-weight: bold;"><span align="left">- NileWorx</span></p>
</td>
</tr>
</tbody>
</table>
<br />
<table width="600px" align="center" bgcolor="#FFFFFF">
<tbody>
<tr align="center">
<td style="padding:9px 14px;color:#696969;font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:13px;text-align:left;line-height:150%">
<a style="text-decoration:none;" href="" target="_blank"><img src="" /></a>
<div align="left">
<a style="text-decoration:none;" href="" target="_blank"><h3 style="color:#49ADBD;font-size:12pt">Football Logo Quiz - Android</h3></a>
<p style="text-align: justify;">Football Logo Quiz is a worldwide game. +10,000,000 are playing logo quiz games and we filled it with many good features. It has an admin panel and use AdMob to monetize it. It is easy to customize!</p>
<div style="font-family:Arial,'Helvetica Neue',Helvetica,sans-serif;font-weight: bold;display:inline-block;width: auto; background-color: green;padding: 8px;color: #FFFFFF"><a style="color:#FFFFFF;text-decoration:none;" href="" target="_blank">VIEW FULL</a></div>
</div>
</td>
</tr>
<tr><td><hr /></td></tr>
<tr align="center">
<td align="center">
<table align="left" width="280" >
<tbody>
<tr>
<td style="padding-top:9px;padding-left:10px;padding-bottom:9px;padding-right:0;color:#696969;font-family:Helvetica;font-size:13px;line-height:150%;text-align:left">
<a style="text-decoration:none;" href="" target="_blank"><img src="" /></a>
<a style="text-decoration:none;" href="" target="_blank"><h3 style="color:#49ADBD;font-size:12pt">Success Quotes - Android & iOS</h3></a>
<p style="text-align: justify;">SuccessQuotes is an android motivational application. It has SQLiteDatabase with 1000 success quotes for more than 180 authors and sharing features.</p>
</td>
</tr>
</tbody>
</table>
<table align="right" width="280">
<tbody>
<tr>
<td style="padding-top:9px;padding-right:10px;padding-bottom:9px;padding-left:0;color:#696969;font-family:Helvetica;font-size:13px;line-height:150%;text-align:left">
<a style="text-decoration:none;" href="" target="_blank"><img src="" /></a>
<a style="text-decoration:none;" href="" target="_blank"><h3 style="color:#49ADBD;font-size:12pt">Facebook Feeds Notifier - Android</h3></a>
<p style="text-align: justify;">Never miss an important post!! .. keep in touch with your favorite facebook pages without opening the facebook application..</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<br />
<table width="600px" align="center" bgcolor="#FFFFFF">
<tbody>
<tr>
<td style="padding-top:9px;padding-right:10px;padding-bottom:9px;padding-left:0;color:#696969;font-family:Helvetica;font-size:13px;line-height:150%;">
<p style="text-align: right;" align="right">
Codecanyon: <a style="text-decoration: none;color:#49ADBD" target="_blank" href="http://codecanyon.net/user/NileWorx/portfolio?ref=NileWorx">Our portfolio</a>
<br />
Skype: <span style="text-decoration: none;color:#49ADBD">nileworx.support</span>
<br />
E-mail: <a style="text-decoration: none;color:#49ADBD" href="mailto:nileworx.contact#gmail.com">nileworx.contact#gmail.com</a>
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
ahmed, this is Ros from Campaign Monitor here. One thing is writing HTML code, however if you want to use our email editor, you will need to use our template language to create editable areas in your template. Note that our template language differs from MailChimp's, so you will need to make two versions of your template.
If you're stuck on the code, I would highly recommend you create and export a template from our email builder.
Thanks, eng.ahmed - let us know if you have any other questions!
I am using Watir (watir-webdriver) with Ruby to write an automated testing script.
I am trying to get the text which is random numbers, in this case 103QUL6M, from the HTML. Since the random number text is different every time I run the script, I want to make sure my code works every time. After I get the text I want to store it in a variable.
<div id="folio-main">
<div id="main">
<form action="/servlets/ProcessAction?identifier=orderConfirmationForm" method="post" name="orderConfirmationForm">
<div id="header">
<div id="info">
<div id="OrderDetails" class="detailsLT">
<h3>Order Details</h3>
<table cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="tdLabel"> Order Number: </td>
<td class="tdData">**103QUL6M**</td>
</tr>
<tr>
</tbody>
</table>
<ul class="listLinkCol">
<ul class="listLinkCol">
<ul class="listLinkCol">
</div>
<div id="OrderHelp" class="detailsRT">
</div>
<div style="clear:both;"></div>
<p>
</form>
</div>
</div>
</div>
</div>
Easy Peasy.
$browser.div(:id => "OrderDetails").table(:index => 0).rows[0].cells[1].text