I am trying to click on a link using webdriver but it throws me a ElementNotVisibleException saying "Element is not currently visible and so may not be interacted with"
My WebDriver code:
addProgram.click();
addProgram refers to an anchor element. This is populated by annotating #FindBy(how= How.LINK_TEXT, using="Add Program"). In other words it is similar to driver.findElement(By.linkText("Add Program")).
My HTML is:
<div class="form_btn">
<a href="/program/addProgram">
<span>Addrogram</span
</a>
</div>
It starts working when I remove the css declaration from the above div. The dive has a hover style, may be that is the one causing the problem.
CSS:
.form_btn {
float:left;
background:url(/bg_button_right.gif) no-repeat scroll top
right;
color: #fff;
display: block;
height:22px;
font: bold 10px arial;
margin-right: 0px;
margin-top:2px;
padding-right: 4px; /* sliding doors padding */
text-decoration: none;
}
.form_btn span {
background:url(/assets/images/provider/bg_button_left.gif) no-repeat;
display: block;
float:left;
line-height:18px;
padding: 2px 5px 5px 10px;
font-size:11px;
}
.form_btn a{
color:#fff;
}
.form_btn a:hover{
color:#fff;
text-decoration:none;
cursor:hand;
}
I have trawled the web trying to find a solution but none has worked. Any suggestions/help is greatly appreciated.
Thanks,
Chris.
(UPDATE) This issue was resolved and should be available since Selenium 2.4.0
Sounds like you ran into the same bug as I did:
http://code.google.com/p/selenium/issues/detail?id=1445
the work-around is to get the element inside the link and click.
re-writing your code:
driver.findElement(By.linkText("Add Program")).findElementBy(By.tagName("span"))
I just solve this error while using capybara in ror project by add " Capybara.ignore_elements = true " to features/support/env.rb
Working from #Zernel's solution, the following solves for ror project using capybara.
Add Capybara.ignore_hidden_elements = true to the file config/environments/test.rb
Using texts is not always the good methodology.
Try this:
driver.findElement(By.cssSelector("div.form_btn > a[href*='addProgram'] > span")).click();
Always Use CSS, It performs better than XPath.
Related
I have been having trouble creating a web app for a phone using Angular and Material Design components. In order for my web app to work well on a phone, it needs to have small buttons and small select statements. Unfortunately, it looks like the framework is adding a style statement for the select element. That style statement is specifying the width of the element and the width it is specifying is way too big. How can I specify small select statements?
Below are the key parts of the two input files: app.component.html and app.component.css. There is a third section that shows the code that is generated by Angular2 as I see it in Chrome's developer tools. The key part of that code is the style statement (style="width: 139.325px;"). If I change the width using the develop tools then I can get the button size I want. I just don't know how to get the size i want using the CSS file.
---- Resulting Ang2 Code -----
<md-select _ngcontent-c0="" placeholder="Number of players" role="listbox" ng-reflect-model="4" ng-reflect-placeholder="Number of players" class="ng-untouched ng-pristine ng-valid mat-select" tabindex="0" aria-label="Number of players" aria-required="false" aria-disabled="false" aria-invalid="false" aria-owns="md-option-0 md-option-1 md-option-2 md-option-3 md-option-4 md-option-5 md-option-6 md-option-7 md-option-8"><div cdk-overlay-origin="" class="mat-select-trigger"><span class="mat-select-placeholder mat-floating-placeholder" style="width: 139.325px;">Number of players </span><!--bindings={
"ng-reflect-ng-if": "[object Object]"
}--><span class="mat-select-value"><span class="mat-select-value-text">4</span> </span><span class="mat-select-arrow"></span> <span class="mat-select-underline"></span></div><!--bindings={
"ng-reflect-origin": "[object Object]",
"ng-reflect-positions": "[object Object],[object Object",
"ng-reflect-offset-x": 0,
"ng-reflect-offset-y": 0,
"ng-reflect-min-width": "152.3249969482422",
"ng-reflect-backdrop-class": "cdk-overlay-transparent-backdr",
"ng-reflect-has-backdrop": "",
"ng-reflect-open": false
}--></md-select>
---- My attempt to override the css for the select statement in app.component.css -----
md-select{
font-size: 10px;
padding: 1px;
min-width: 12px;
}
md-option{
font-size: 10px;
padding: 1px;
min-width: 12px;
}
---- My app.component.html ---------
<md-select placeholder="Number of players" [(ngModel)]="numPlayers" (ngModelChange)="onChangeNumPlayers()" >
<md-option *ngFor="let mynum of numberOfPlayersList" [value]="mynum.value">{{ mynum.name }}</md-option>
</md-select>
My friend Sergiu from Romania helped me out with this. The framework creates elements that encapsulate the md-select and md-option elements. You cannot set the styles for elements outside of md-select and md-option using app.component.css. In order to control those elements you need to add them to the base styles.css file. These classes were sufficient to shrink the select statement for me.
.mat-select,
.mat-select-trigger,
.mat-select-placeholder,
.cdk-overlay-pane,
.mat-select-panel,
.mat-select-content
{
min-width: 40px !important;
width: 40px !important;
}
.mat-option {
padding: 0 2px!important;
}
This is the first time I saw this... I have text in my code and it says Passport and Visa Requirements. This is my markup
<div class="rectangle"><span>Passport and Visa Requirements</span></div>
Crazy thing happens on the live server, somehow a link is injected on the word "visa". This is the markup I see in firebug.
<div class="rectangle">
<span>
Passport and
<a id="_GPLITA_0" title="Click to Continue > by CouponDropDown" style="text-decoration:underline" href="http://i.txtsrving.info/click?v=" in_rurl="http://i.txtsrving.info/click?v=" in_hdr="">
Visa
<img src="http://cdncache1-a.akamaihd.net/items/it/img/arrow-10x10.png" style="display: inline; vertical-align: super; margin: 0px 0px 0px 3px; padding: 0px; border: 0px none; height: 10px;">
</a>
Requirements
</span>
</div>
Is my htaccess file not configured properly? How do I deal with this? Is this a security issue?
http://www.bleepingcomputer.com/virus-removal/remove-coupondropdown
This is probably adware on your computer, affecting your browser. Your website is probably fine.
In my application.css file I am encountering errors when I have my code inputted below. The h1.title code will execute but the h1 code will not. It may be worth mentioning that in my application the h1.title is above the h1. However, I can get it to work if I insert the h1 code directly after the h1.title code (Repeating myself with the h1 snippet). I don't want to do this as I would like to keep my code DRY. This seems trivial but I have wrestled quite a bit with it and made no progress.
h1 {
color: maroon;
font-size: 150%;
font-style: italic;
display: block;
width: 100%;
border-bottom: 1px solid DarkSlateGrey;
}
h1.title {
margin: 0 0 1em;
padding: 10px;
width: 98.5%;
background-color: orange;
color: white;
border-bottom: 4px solid gold;
font-size: 2em;
font-style: normal;
}
If you add the code directly in application.css, it will appear at the top of the compiled file (I assume your css files are compiled into one). My guess is that other css files included in your application.css overwrite h1 css atrributes.
Use inspect option in your browser (IE, Firefox, Chrome etc. have one built in nowadays) and see where the h1 gets it's attribute values from.
i've borrowed some code from link text to nest tabs using jq
everything is ok 'cept I cannot work out to center the tabs
using the YUI library, this is v easy. However, I can't use the YUI library coz my command of JS is negligible and fitting my php to their code is murderful and a time-waster.
are there ways to center jq tabs ?
Tom
You can add a bit of styling:
.ui-tabs .ui-tabs-nav { float: none; text-align: center; }
.ui-tabs .ui-tabs-nav li { float: none; display: inline; }
.ui-tabs .ui-tabs-nav li a { float: none; }
Source - Richard Worth
Make sure to include this after the jQuery UI style-sheet so it overrides, you can see a demo here.
If you can't use a stylesheet and must do this in code, use .css(), like this:
$("#tabs").tabs();
$(".ui-tabs .ui-tabs-nav").css({float: 'none', textAlign: 'center'});
$(".ui-tabs .ui-tabs-nav li").css({float: 'none', display: 'inline'});
$(".ui-tabs .ui-tabs-nav li a").css({float: 'none'});
I have a Grails application with a form in it. Once the user has entered the data and submitted it, and it's been validated etc.. I need a message to popup in a little window to give the user some feedback - it needs to popup, rather than be displayed on the page. Can anyone advise me on the best way to do this?
I have implemented the same mechanism for my application, and I am using the jQuery plugin 'smartmodal' (used by the Nimble plugin originally). See here
You simply have to redirect the request in the controller validation code to a GSP page containing the following code:
<script type="text/javascript" src="${resource(file: 'jquery-1.3.2.js')}"></script>
<script type="text/javascript" src="${resource(file:'jquery.smartmodal.js')}"></script>
<LINK rel="stylesheet" href="./css/smartmodal.css">
...
<body>
...
<g:javascript>
$(function() {
$("#msg").hide();
$("#msg").modal({hide_on_overlay_click:false});
$("#msg").modal_show();});
</g:javascript>
<div id="msg">
My feedback message is here
</div>
<g:link controller="..." action="...">Close</g:link>
I hope it helps,
Fabien
EDIT:
An extract of the smartmodal.css file that will render the 'modal effect' is:
#modal_content {
display: none;
position: fixed;
left: 50%;
padding: 0px;
top: 10%;
background: #FFF;
border: 0px solid #d2d2d2;
width: 400px;
margin-left: -200px;
text-align: left;
}
#modal_overlay {
background-color: #000;
}
However if you want the complete file, it is available inside the great Nimble grails plugin