On the website that i am testing , i have a link -clicking to which brings out a popup.
I am able to locate the link , however clicking on the link results in an "uncaught exception TypeError: Cannot read property popup...". if i suppress the exception the test passes but i still can't see the popup.
I have tried putting waits but it didn't work. So thought of checking here if someone faced a similar issue?
The link element that brings up the popup is below
<a class="locpickerSelect" data-blank="<span>Select Location</span>" data-change="<span>Change Selection</span>" href="#"><span>Select Location</span></a>
The popup adds an additional div in the source code , below is what i see in source code when i click on the link
<div class="PopupOverlay" style="inset: 0px; position: fixed;"></div>
<div class="PopupShadow" style="width: 940px; height: 352px; top: 5px; left: 216px;"></div>
<div class="PopupFrame" style="width: 940px; height: 352px; left: 216px; top: 5px;">
<a class="ClosePopup icon cancel-circle"></a>
<iframe seamless="seamless" frameborder="0" width="100%" height="100%" src="https://<myurl>;forFeature=&selectOrgId=" style="display: block; height: 352px;"></iframe>
</div>
The "uncaught exception TypeError: Cannot read property popup..." probably is coming from the application, not the test.
You can put this at the top of the test,
Cypress.on('uncaught:exception', (err, runnable) => {
return false
})
This will suppress any exception from the app, but ideally you want to look at why it occurs.
There does not seem to be anything in the HTML you show that might cause it. Most likely it is in the click handler of locpickerSelect.
Related
I want to test for broken images on the page.
If I inspect the DOM for the broken image I see
<img src="https://www.example.com/images/a123.jpg" alt="a123">
#shadow-root (user-agent)
<span id="alttext-container">
<img id="alttext-image" width="16" height="16" align="left" style="margin: 0px;
display: inline; float: left;">
<span id="alttext">a123</span>
</span>
But if I try to access the alttext in the test it fails.
cy.get('img[src="https://www.example.com/images/a123.jpg"]')
.shadow()
.find('span[id="alttext"]')
How do I verify the alt text that shows on the screen.
Unfortunately the #shadow-root (user-agent) child element can't be accessed from javascript, so it also can't be queried with Cypress commands.
The best you can do to verify the image isn't broken is to check it's naturalWidth property
cy.get('img[src="https://www.example.com/images/a123.jpg"]')
.should('be.visible')
.and($img => expect($img[0].naturalWidth).to.be.gt(0))
I have implemented a loading indicator in Angular that looks like this:
<div cdkTrapFocus class="activity-indicator-container">
<div class="content-container">
<ng-content></ng-content>
<div [ngStyle]="{visibility: showLoader ? 'visible': 'hidden'}" class="indicator-overlay">
<div class="loading-indicator">
</div>
</div>
</div>
</div>
The indicator-overlay is styled like that:
.indicator-overlay {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.35);
}
When the indicator is displayed, the content is greyed out by a semi-transparent div.
Running cy.contains('text in content').should('not.be.visible') fails when the overlay is displayed.
So is there a way to test in Cypress that the text is actually not accessible (selectable, clickable etc)?
You could use a try/catch block. It sounds like you are testing that the overlay is trapping any click events, more than you are testing that the elements are not clickable (since you aren't changing the elements themselves)
You could do something like this
displayLoadingOverlay();
try{
// this should fail, since the overlay will be blocking it
element.click();
} catch(error){
expect(error).to.contain(message);
}
this test ensures that if you try to click on the element (repeat for as many elements as you would like) an error should be thrown since the element is not clickable by Cypress. If no error is thrown, you can assume the click event worked.
Trying to figure out how to select a field on a form using textarea with specifying the class and the ID. Unfortunately, I don't have control over the HTML that is generated as it is a vendor product.
Sample HTML:
<textarea class="text sr " id="arid_WIN_0_636875000" style="left: 402px; top: 0px; width: 261px; height: 21px;" rows="1" cols="20" wrap="off" arautoctt="400" arautocak="0" maxlen="255"></textarea>
I need to use both the ID and the class because the ID is used in multiple spots as well as the class, however, I have found the combination of the two is unique.
I've tried doing:
z = textarea(:class => "text sr ", :id => "arid_WIN_0_636875000")
This came back with:
=> #<Watir::TextArea:0x272de17c located=false sel
>"arid_WIN_0_636875000", :tag_name=>"textarea"}>
Tried setting it and came back with:
Watir::Exception::UnknownObjectException: unable to locate element, using {:class=>"text sr ", :id=>"arid_WIN_0_636875000", :tag_name=>"textarea"}
from C:/Ruby21/lib/ruby/gems/2.1.0/gems/watir-webdriver-0.7.0/lib/watir-webdriver/elements/element.rb:507:in `assert_exists'
from C:/Ruby21/lib/ruby/gems/2.1.0/gems/watir-webdriver-0.7.0/lib/watir-webdriver/user_editable.rb:32:in `clear'
from C:/Ruby21/lib/ruby/gems/2.1.0/gems/watir-webdriver-0.7.0/lib/watir-webdriver/user_editable.rb:11:in `set'
from (irb):21:in `block in irb_binding'
from C:/Ruby21/lib/ruby/gems/2.1.0/gems/selenium-webdriver-2.45.0/lib/selenium/webdriver/common/target_locator.rb:50:in `window'
from C:/Ruby21/lib/ruby/gems/2.1.0/gems/watir-webdriver-0.7.0/lib/watir-webdriver/window.rb:193:in `use'
from (irb):20
from C:/Ruby21/bin/irb:11:in `<main>'
This is what the HTML is for the popup:
<div class="DIVPopup shadow " id="popup_0" style="left: 495px; top: 161.5px; width: 930px; height: 673px; overflow: hidden; visibility: inherit; z-index: 100004;" arwindowid="0"><table class="DIVPopup ResizablePopup" id="DivTable" cellspacing="0" cellpadding="0"><tbody><tr class="DIVPopupTitleBar DIVDraggable"><td class="topleft"> </td><td align="left" class="center" id="title_0" nowrap=""><div class="title">Name of form is here </div><button title="Close" class="Close right" id="ardivpcl" onclick="var target=FindClickedPopup('0', event); if(target){ target.OnCancel();target.stopBubbling(event);return false;}" type="button"></button></td><td class="topright"> </td></tr><tr><td class="DIVPopupBodyNoBorder DIVPopupBodyBorder" colspan="3"><iframe id="1433419427651P" src="/arsys/forms/vmpit-ermdy006/NameOfFormIsHere/Administrator/?cacheid=fa90df9&format=html" frameborder="0" style="width: 100%; height: 652px;"></iframe></td></tr></tbody></table><b class="rndfooter" style="background-color: rgb(255, 255, 255);"><b class="rnd1" style="background-color: rgb(255, 255, 255);"></b><b class="rnd2" style="background-color: rgb(255, 255, 255);"></b><b class="rnd3"></b></b><div class="ResizeHandle right" id="handle_0"></div></div>
Given the HTML for the popup, I would guess that it is just a div element within the original page rather than its own browser window. Accessing the popup should be with:
browser.div(:id => "popup_0")
That said, I do not see the textarea in it, which means it is likely in the iframe element. Iframes have to explicitly told to Watir, which means to find the textarea you need:
browser.div(:id => "popup_0").iframe.textarea(:class => "text sr ", :id => "arid_WIN_0_636875000")
I think the problem may be that you have a bad call. BTW Don't mix your hash styles. Pick the more modern style over the hashrocket. Try this...
get_a_better_name = textarea(class: "text sr ", id: "arid_WIN_0_636875000")
tip - Using a code linter like rubocop (https://github.com/bbatsov/rubocop) can help catch these errors.
Sorry, total Juice UI newbie, and really a web app newbie as well. Having trouble getting the simple example working from the Juice UI website. It is supposed to illustrate how easy it is to make a drag-drop example, but I get a lot of errors which makes me think I'm missing something really basic. I'm trying to use the Droppable control, documented here:
http://juiceui.com/controls/droppable
The draggable example worked fine, so I've gotten that far, but when I paste the droppable example text into my C# web application, I get errors that the style needs to be outside the form, outside the body, etc - I keep moving it up the chain. Eventually it says "element style needs to be in a parent element" - not sure where to put it if I can't put it on the page. I suppose in a .css file? Also, it says the tag is missing a required attribute 'type'.
Any help would be much appreciated!
<style>
.draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
.droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script>
$(function(){
$( "#_Default" ).droppable( "option", "drop", function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
);
});
</script>
<asp:panel ID="_Draggable" CssClass="draggable ui-widget-content" runat="server">
<p>Drag me to my target</p>
</asp:panel>
<juice:draggable TargetControlID="_Draggable" runat="server"/>
<asp:panel ID="_Default" CssClass="droppable ui-widget-header" runat="server" ClientIDMode="Static">
<p>Drop here</p>
</asp:panel>
<juice:droppable TargetControlID="_Default" runat="server"/>
The document you're reviewing is a partial document. I believe it assumes you have the rest of the document already authored:
<!DOCTYPE html>
<html>
<head>
<title>Droppable Example</title>
</head>
<body>
<!-- Your Code Here -->
</body>
</html>
Okay, a little research revealed:
element always goes inside the section - duh
the type attribute for always needs to be type="text/css",
so I added that
Added the type attribute for the (type="text/javascript")
Another error popped up, conflict with the _Default id in the
example, same as the Default class name when you create a new web
application. Bad choice of element ID for an example in which the
user will likely be doing exactly what I was doing, creating a
default web app and pasting in the code and expecting it to run.
Don't know why none of these errors were caught when this example was written, but kind of frustrating first experience with Juice UI. Thanks all for your time and responses.
I am currently working with a page that has a few hidden divs, being called on to be displayed later.
This is the code I have on the page itself causing the problem.
<div align="center" id="check">
Block of plain text right here.<br />
Checking...<br />
<img src="http://sw6.us/template/images/loading.gif" /><br />
<?php
require("databasetest.php");
?>
echo "check_data shown";
</div>
This code here is what I have modifying the "check" div on a style page
.check {
padding-top: 25px;
padding-left: 0px;
color: white;
align: center;
display:none;
}
As you can see the div is instructed to be hidden on page load via the style code. Everything is hidden except for the picture.
I don't believe the PHP is the issue because I included an echo displaying text which is properly hidden along with the HTML before it. I also took out that require command and the image was still not hidden. The image being a .GIF is not the issue either, I have tried using a .png and got the same problem!
Thanks for the help! It is greatly appreciated!