How to click on a particular image within pop up window in watir-webdriver - watir-webdriver

This is my first attempt at using watir-webdriver for automating. As I go through each test case,I learn new things and face new challenges.I'm so grateful for all the questions and answers here as it has helped me tremendously.Thanks
I'm faced with a new challenge and it's with popups and I'm not very clear on how to resolve this even after going through lot of popup questions on stackoverflow.
I haven't written the watir code yet....just trying to figure out how to do it.So appriciate some pointers.
So I'm trying to create a user profile-fill the form with all relevant information and hit Create profile button.(All this is coded and works fine).
On clicking the Create Profile button a pop up window pops up with lot of images on it in a tabular form and with text "please click on the image of apple". The text is randomly generated-so instead of apple I could be asked to click on a plane.I then need to click on that particular image.
How can I have watir-webdriver do this for me?How do i tell watir-webdriver to use pop up window,read the text at top,match it with image and click on the image?
Thanks.
Here's the error I get.Also included is watir code and HTML
Error:
ArgumentError: invalid window selector: {:id=>"humanVerificationContainer"}
C:/Ruby193/lib/ruby/gems/1.9.1/gems/watir-webdriver-0.6.4/lib/watir- webdriver/window.rb:15:in `initialize'
C:/Ruby193/lib/ruby/gems/1.9.1/gems/watir-webdriver-0.6.4/lib/watir- webdriver/has_window.rb:35:in `new'
C:/Ruby193/lib/ruby/gems/1.9.1/gems/watir-webdriver-0.6.4/lib/watir- webdriver/has_window.rb:35:in `window'
===============================================================================
$b.window(:id => "humanVerificationContainer").use do
$b.link(:id => "humanVerificationQuestion").click
<div id="humanVerificationContainer" style="position: fixed; z-index: 9999; top: 50px; left: 750.5px; display: block;"><a class="close"></a><div id="humanVerificationQuestion" class="modal">
<h2>Click the picture of an aircraft carrier</h2>
<table>
<tbody><tr>
<td>
<div answer="0" class="humanImage" style="float:left; background:url('/images/security_image_tile.png') no-repeat -300px 0px; height:100px; width:100px"> </div>
</td>
<td>
<div answer="1" class="humanImage" style="float:left; background:url('/images/security_image_tile.png') no-repeat 0px -100px; height:100px; width:100px"> </div>
</td>
<td>
<div answer="2" class="humanImage" style="float:left; background:url('/images/security_image_tile.png') no-repeat 0px -200px; height:100px; width:100px"> </div>
</td>
<td>
<div answer="3" class="humanImage" style="float:left; background:url('/images/security_image_tile.png') no-repeat -200px -100px; height:100px; width:100px"> </div>
</td>
</tr><tr>
<td>
<div answer="4" class="humanImage" style="float:left; background:url('/images/security_image_tile.png') no-repeat -300px -400px; height:100px; width:100px"> </div>
</td>
<td>
<div answer="5" class="humanImage" style="float:left; background:url('/images/security_image_tile.png') no-repeat -600px -200px; height:100px; width:100px"> </div>
</td>
<td>

When a new browser window is opened, you can invoke the use method.
browser.window(:title => "annoying popup").use do
browser.button(:id => "close").click
end

Based on the html, the popup does not appear to be an actual window. Instead, it is just a div tag within the main page that looks like a popup. Assuming it is not in an frame, you can treat it like you would any other div tag.
To get the "popup":
popup = $b.div(:id => "humanVerificationContainer")
To get the subject at the top of the popup:
subject = popup.h2.text.gsub(/^Click the picture of an? /, '')
#=> "aircraft carrier"
To click the "image", which is actually a div with a background image:
popup.div(:class => 'humanImage').click
However, there does not appear to be a way to determine which image is the aircraft. So your developers will likely need to put some sort of identifier in or make sure the image is always in the same answer (just for the test environment).

Related

Angular8 - Getting File a Binary String from a Drop Zone File

In my Angular8 app, I have a drop zone where I can drag & drop files, such as PDF, MS Word, CSV, etc. I am using the technique found on this blog, but also documented by Mozilla MDN. The code works very well, but the one important thing I can't figure out is how to capture the file bytes being uploaded, so that I can save them to the database.
I placed a screenshot of the Opera browser source debugger below, showing the typescript and resulting fileObj and blobObj values. The debugger complains about readAsBinaryString(blobObj), saying that blobObj is not a Blob. Looking at the blobObj value, I can see it's not a Blob that I've seen before. And, looking at all the values, none stand-out to me as a Blob. Also, the file bytes aren't obvious either. Looking at the html, below, I can't think of a change that would reveal the bytes.
I'm hoping someone with drag and drop experience can explain how it's done.
Thanks!
Debugger Screenshot
HTML
<table class="table table-striped table-forum">
<tbody>
<tr>
<td>
<div class="container" style="float: left; padding-top: 10px; padding-left: 10px;" appDnd (fileDropped)="onFileDropped($event)" (itemDropped)="onItemDropped($event)">
<input type="file" #fileDropRef id="fileDropRef" multiple (change)="fileBrowseHandler($event.target.files)" />
<img src="assets/img/dnd/ic-upload-file.svg" alt="">
<h3>Drag and drop file here</h3>
<h3>or</h3>
<label for="fileDropRef" style="font-size: 14px; font-weight: 600; height: 25px; padding: 5px 5px;">Browse for File</label>
</div>
</td>
</tr>
<tr>
<td>
<div class="files-list" style="width: 35%;">
<div class="single-file" *ngFor="let file of files; let i = index">
<img src="assets/img/dnd/ic-file.svg" width="45px" alt="file">
<div class="info">
<h4 class="name">
{{ file?.name }}
</h4>
<p class="size">
{{ formatBytes(file) }}
</p>
<app-progress [progress]="file?.progress" style="width: 200px;"></app-progress>
</div>
<img src="assets/img/dnd/ic-delete-file.svg" class="delete" width="20px" alt="file" (click)="deleteFile(i)">
</div>
</div>
</td>
</tr>
</tbody>
</table>
const reader = new FileReader();
// FileReader has an onload event that you handle when it has loaded data
reader.onload = (e: any) => {
const data = e.target.result as any;
console.log({type: 'GalleryComponent prepareFilesList - data:', data});
};
// this will kick off the onload handler above
reader.readAsDataURL(file);

i-check checkbox in fooTable Header <th> not working

In FooTable 3.1.4 I want to use a pretified i-Check checkbox for a checkAll functionality in the Header of the table.
This is the HTML without i-Check:
<th data-type="html" data-sortable="false"
data-filterable="false" style="display: table-cell;"
class="footable-last-visible">Choose
<input name="check_all" class="all" type="checkbox">
</th>
When we run this script without i-Checks it runs fine. However - applying i-Checks makes the prettified checkbox unclickable - We are unable to check / uncheck.
This is the HTML with i-Check applied:
<th class="footable-last-visible" data-type="html" data-sortable="false"
data-filterable="false" style="display: table-cell;">Kies
<div class="icheckbox_square-green" style="position: relative;">
<input type="checkbox" name="check_all" class="all"
style="position: absolute; opacity: 0;">
<ins style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"
class="iCheck-helper">
</ins>
</div>
</th>
So it seems FooTable does not accept the i-Checks modified HTML in the head of the table. I did find a (closed) Github Issue post addressing the problem :
"the issue was that the sorting component worked off of a click on the
entire TH element and had a call to e.preventDefault() in the handler.
This was basically killing the default click behavior of elements
placed within the header element. I've since removed this limitation
and it will be released in the next version shortly."
But this post does not clarify as of which version of FooTable this problem is solved.
Or did I make a mistake in the code ..... So - any input much appreciated.
your script must be:
//first
$('.table').footable();
//after
$('#checkall').on('ifChecked ifUnchecked',function(evant){
if(evant.type == 'ifChecked')
$('.check').iCheck('check');
else
$('.check').iCheck('uncheck');
});

iPhone 5S iOS7 Responsive Email Contiguous Image Height Issue

As soon as I started coding responsive emails, I noticed that contiguous images (all with the same original height) in a HTML table row didn't always remain the same height when being responsively scaled. That's a big problem for me because the email layouts that I am working on are image heavy and have to be tightly aligned. Uneven height images break the layout. I eventually came up with the solution presented here: http://am-samples.gear.host/iPhone5S-iO7-issue.html
Navigate to that URL and resize the browser to see the responsive scaling in action.
Here are the main snippets in case you can't navigate to the URL above:
Table that has the contiguous images
<table class="100p" width="100%" cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#7fff00" style="background-color: #7fff00;">
<tr>
<td class="100p" align="center" width="100%" valign="top">
<div>
<table class="100p" width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="100p" width="100%" align="left" valign="top">
<span width="26.09375%" style="width: 26.09375%; display: inline-block;">
<img id="ourStory" class="responsiveImage" src="http://am-samples.gear.host/images/bottom-our-story.png" border="0" style="display: block;" />
</span><span width="19.6875%" style="width: 19.6875%; display: inline-block;">
<img id="recipes" class="responsiveImage" src="http://am-samples.gear.host/images/bottom-recipes.png" border="0" style="display: block;" />
</span><span width="25.15625%" style="width: 25.15625%; display: inline-block;">
<img id="seafood" class="responsiveImage" src="http://am-samples.gear.host/images/bottom-seafood.png" border="0" style="display: block;" />
</span><span width="29.0625%" style="width: 29.0625%; display: inline-block;">
<img id="giftCards" class="responsiveImage" src="http://am-samples.gear.host/images/bottom-giftcards.png" border="0" style="display: block;" />
</span>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
CSS classes referenced
.responsiveImage {
max-width: 100% !important;
width: 100% !important;
height: auto !important;
border: none;
}
*[class="100p"] {
width: 100% !important;
height: auto !important;
}
I've stripped the code down to the essentials just to clearly present the issue. If you take a look at the source code, you'll see that the top and bottom black strips are just tables with a black background color. The red strip is actually made up of contiguous images. The original height of all the images is the same. Because of that I expected the height of all the images to scale equally. The table that contains the images has a background color of florescent green. That way, in Litmus, it is easy to see if the height of any of the images is different.
I've tested this solution in Litmus and it works fine on the email clients that I am interested in except two: iPhone 5S (iOS7 and iOS8). Here is a screenshot of the result in iPhone 5S and iOS7 (iOS 8 produces a similar result) : http://am-samples.gear.host/images/iPhone5S-iOS7-issue.jpg
So the problem is that when scaling, sometimes the image heights are not all equal. Any ideas on how to fix this on the iPhone 5S?
Different widths with the same height makes the images a different scale, which means that as they shrink through the 100% w x auto h, they will differ in height.
To retain consistent height/width through mobile I would make sure that the scale is identical. E.g. make all images 100px x 50px. (you can use percents here if you wish too)
The only other option I can really offer from what I see is a defined height to force each to that amount, but in HTML email, this is not likely to be followed by the email clients processors.

webkit-transform issue on safari using select elements

I am developing a webapp for ipad and have come across an issue using select option elements when moving divs with webkit-transform. Forgive the table layout but I'm trying to replicate the issue in the app as closely as possible.
Click on the green box and the panels move to the left and the select box is fine. Reload the page and click on the red box and the panels move to the left (using webkit-transform) and when you click on the select box, the list is displayed outside of the browser and the container box jumps.
Note that this is not an issue on the latest GA chrome builds.
<html>
<head>
<title>Select Testing</title>
<style>
.button {
position: relative;
width: 44px;
height: 44px;
}
#moveGood {
background-color: lime;
}
#moveBad {
background-color: red;
}
div#panels {
position: relative;
height: 100%
}
div.panel {
position: relative;
top: 0px;
left: 0px;
width: 200px;
height: 50px;
border: 2px solid black;
}
.leftBad {
-webkit-transform: translate3d(-200px, 0, 0);
}
.leftGood {
left: -200px;
}
div#panelContainer {
position: absolute;
top: 100px;
left: 0;
overflow: hidden;
width: 210px;
}
</style>
<script type="text/javascript">
function leftBad() {
document.getElementById("panels").className += ' leftBad';
}
function leftGood() {
document.getElementById("panels").className += ' leftGood';
}
</script>
</head>
<body>
<div id="moveBad" class="button" onclick="leftBad();"></div>
<div id="moveGood" class="button" onclick="leftGood()";></div>
<div id="panelContainer">
<div id="panels">
<table>
<tr>
<td>
<div id="page1" class="panel">
</div>
</td>
<td>
<div id="page2" class="panel">
<select>
<option value="volvo">
Volvo
</option>
<option value="saab">
Saab
</option>
<option value="mercedes">
Mercedes
</option>
<option value="audi">
Audi
</option>
</select>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Safari tries to be helpful when there's a select box partially out of view, if you see:
http://jsfiddle.net/H5J27/
The first example doesn't have -webkit-transform, but when you click on it, it will be displaced in order to reveal it fully.
Now, Safari apparently isn't aware that, once transformed, the select box is in full view. The engine still thinks it's partially obstructed and it will move the select box and it's parent container to a point where it thinks you can see it.
The workarounds are not very encouraging. I'm guessing you're doing this coupled with animation in order to enjoy the benefits of hardware acceleration, so I'd add an event listener and the end of the animation, remove the css transform and apply normal positioning. This will get complicated if you have to do it on several elements, but it's good enough for a one time thing.

Scriptaculous Draggable/Droppable script not working properly when dragging into a scrolling div

I am using the Scriptaculous Draggable/Droppable scripts and have a problem when dragging into a scrolling div. I have the following layout (based on this question):
#grid-container { left:33px; position:relative; width:300px; }
#grid { width:310px; height:400px; overflow:auto; margin-bottom: 15px; }
#grid-container ul { width:400px; list-style-type:none; white-space: nowrap; }
#grid-container li { display:inline; list-style-type:none; padding:5px 15px 5px 15px; height:88px; text-align:center }
.image-row { margin-left: 10px; }
.grid-image { height:50px; margin-left:-20px; }
Here is the html:
<div id="grid-container">
<div id="grid">
<div id="row1" class="image-row">
<ul>
<li><img id="img1" class="grid-image" src="images/img1.jpg"></li>
<li><img id="img2" class="grid-image" src="images/img2.jpg"></li>
<li><img id="img3" class="grid-image" src="images/img3.jpg"></li>
<li><img id="img4" class="grid-image" src="images/img4.jpg"></li>
</ul>
</div>
<div id="row2" class="image-row">
<ul>
<li><img id="img5" class="grid-image" src="images/img5.jpg"></li>
<li><img id="img6" class="grid-image" src="images/img6.jpg"></li>
</ul>
</div>
</div>
</div>
I have another div with draggable items, while all of the img elements are droppable. This works very well for most cases, but when there are too many images for the grid and it has to scroll, I run into issues. I can still drag/drop into most items in that div, but when I scroll down and then try to drag onto an item in the bottom of the list, it drops on the row that was at the bottom before I scrolled the div.
Even if I set the scroll attribute when creating the Draggable items, it will scroll the grid div, but not use the proper Droppable item.
Is there any way to make the Draggable items drop onto the proper Droppable element regardless of if the containing div is scrolled or not?
Yesterday I found this drag-drop-problem-in-scroll-div when having the same problem. Basically the solution is to add Position.includeScrollOffsets = true; to your code.
Hope it helps