With "experimentalSourceRewriting": true in cypress.json I have observed that cypress test runner hides some form labels.
My html form is as below when rendered on a normal browser (screenshot 1)
<div class="cp_label"><label for="c_B2CC050B-DF0E-4CA2-8A0A-AE4A0036FABA" id="aria-label_c_B2CC050B-DF0E-4CA2-8A0A-AE4A0036FABA">Job Announcement Type <span class="cp_mStar">*<span style="position: absolute; clip:rect(1px 1px 1px 1px)"> Mandatory</span></span></label></div>
The Label "Job Announcement Type" is displayed correctly as seen in the Screenshot 1
And on Cypress Test Runner(Chrome) it is as below (screenshot 2)
<div class="cp_label"><label for="c_B2CC050B-DF0E-4CA2-8A0A-AE4A0036FABA" id="aria-label_c_B2CC050B-DF0E-4CA2-8A0A-AE4A0036FABA"><span class="cp_mStar">*<span style="position: absolute; clip:rect(1px 1px 1px 1px)"> Mandatory</span></span></label></div>
The Label "Job Announcement Type" is not displayed as seen in the Screenshot 2
If I disable "experimentalSourceRewriting" by setting it to false, the above form label is displayed correctly.
I need this setting to be true as cypress fails with a Whoops No tests error when I click on a button that navigates to a different page (with in the same superdomain)
Are there ways I can get over this issue of fields getting hidden.
Related
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.
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.
I have a form in a div where I brought submit buttons out of the div to another part of the screen. This works nicely. However, I want to lock that div down to a specific size and relative position and use overflow:auto so when it grows too big (the form has elements that are unhidden with checkboxes) the entire screen doesn't scroll, just the div. The problem is, as soon as I add the overflow style, the submit boxes I moved off the div are hidden. I assume this is because with overflow all elements are locked into that div and scroll bars allow you to access them, but in this case the elements are moved left:-500px and it doesn't even give me a scroll bar to scroll left to see them. Basic code follows:
<div class="div1">
<div class="div2">
<form>
<input type="submit" class="sub1" />
</form>
</div>
</div>`
CSS would be:
div.div1 {
position:relative;
width:1000px;
margin: 0 auto;
}
div.div2 {
width:500px;
height:500px;
position:absolute;
top:125px;
left:500px;
}
input[type=submit].sub1 {
position:absolute;
left: -500px;
}
So this works, but as soon as I change the div2 css to:
div.div2 {
width:500px;
height:500px;
position:absolute;
top:125px;
left:500px;
overflow:auto;
}
The submit button disappears.
My question: is there any way to get the scrollbar and keep the div2 container to 500px high without losing the elements outside the div?
If I understand correctly, you can move div2 within the form and leave the submit button outside of div2. That way, the submit button will always be visible and div2 can have overflow.
<div class="div1">
<form>
<div class="div2">
<!-- form fields go here -->
</div>
<input type="submit" class="sub1" />
</form>
</div>
Note: You'll likely need to adjust styles on the button, but I'm not entirely sure about your end goal.
In my project I have two datepicker both are validate with validation message but message is overlapping on datetimepcker how to show message in next line.
My code:
http://jsbin.com/ufimom/116/edit
Define the following CSS style:
span.k-tooltip
{
position: absolute;
top: 24px;
left: -1px;
}
See it running here: http://jsbin.com/ufimom/132/edit
Ideally Kendo Validator places its tooltips besides the validated input. However, if the input is later enhanced to a ComboBox, AutoComplete or other Kendo Widget, placing the tooltip beside the input may cover important information or break the widget rendering. In this case, you can specify exactly where you want the tooltip to be placed by adding a span with data-for attribute set to the validated input name and a class .k-invalid-msg.
<div id="myform">
<input type="text" id="name" name="name" required>
<span class="k-invalid-msg" data-for="name"></span>
</div>
Kendo Customizing the tooltip position
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!