I am trying to automate a page which has various element types. I am able to login and navigate till that page using Protractor,TypeScript,jasmine2 combination
When i try to enter a text in a field, it throws
Message: Failed: element not interactable.
Does it mean that the entire ng-controller or ng-scope is disabled for element interaction for automation?
Please let me know a solution if there is a way to enable the elements in the page on pageLoad ?
import { browser, by, element } from 'protractor';
import { Locator } from 'protractor/built/locators';
import { PageObjects } from '../TestPageObjects/OR';
import { TestData } from '../TestData/TD';
var po= new PageObjects();
var data= new TestData();
describe('Login', function() {
it('Login to Server', function() {
browser.get('http://server01/test/testapp.html');
element(<Locator>by.xpath(po.login_username)).sendKeys(data.username);
element(<Locator>by.xpath(po.login_password)).sendKeys(data.password);
element(<Locator>by.xpath(po.login_loginBtn)).click();
element(<Locator>by.xpath(po.MainMenu_setup)).click();
element(<Locator>by.xpath(po.SETUP_company)).click();
element(<Locator>by.xpath(po.COMPANY_companyDetails)).click();
browser.switchTo().frame(element(by.id('ifmPortalInfrastturcture')).getWebElement());
browser.sleep(10000);
browser.element(<Locator>by.xpath(po.CompanyName)).clear();
browser.element(<Locator>by.xpath(po.CompanyName)).sendKeys('ANN');
});
});
I expected the behavior to be like entering the text but the terminal showed element not interact-able.
PageObject (PO) selector is below:
export class PageObjects
{
public login_username: string ='//*[#id="username"]';
public login_password: string ='//*[#id="password"]';
public login_loginBtn: string ='//*[#id="btnSubmit"]';
public MainMenu_setup: string ='//a[span[text()="Setup"]]';
public SETUP_company: string ='//a[span[text()="Company"]]';
public COMPANY_companyDetails: string ='//a[span[text()="Company Details"]]'
public CompanyName: string = '//label[contains(.,"Company Name")]/following::input[1]';
//a[span[text()="Receipts"]]
//a[span[text()="Control Text"]]
}
HTML Page is below:
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="portalInfrastructure" dir="ltr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>iProof Axon</title>
<link rel="icon" href="favicon.ico" type="image/ico" />
<style>
#font-face {
font-family: 'FontAwesome';
src: url('iProofCDN/Templates/Default/Styles/LTR/assets/css/Common/icons/fontawesome/fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('iProofCDN/Templates/Default/Styles/LTR/assets/css/Common/icons/fontawesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('iProofCDN/Templates/Default/Styles/LTR/assets/css/Common/icons/fontawesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('iProofCDN/Templates/Default/Styles/LTR/assets/css/Common/icons/fontawesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('iProofCDN/Templates/Default/Styles/LTR/assets/css/Common/icons/fontawesome/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('iProofCDN/Templates/Default/Styles/LTR/assets/css/Common/icons/fontawesome/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal
}
#keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body ng-controller="PortalInfrastructureController as menuList" class="pace-done " ng-init='setPageUrlByPageType("Authenticate", "#pageManager")' id="bdyPageManager">
<div id="pageManager"></div>
<div id="MultiWindowRight" class="noItem " style="display:none">
<img data-imgsrc="/Templates/Default/Styles/LTR/assets/images/RightArrow.png" />
<div class="MultiWindow"></div>
</div>
<script type="text/javascript" src="iProofCDN/Templates/Default/Scripts/JsBundle/Common/ProofConfig.js"></script>
</body>
</html>
<script type="text/javascript">
window.top.ScriptLoader('PageManager', window.document, function () {
//default
});
</script>
with some research one of my colleague found a solution.
The container elements were hidden for access and we unlocked using the following script:
JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript("document.getElementById('Parks').style.display='block';");
NOTE: a Div named "Parks" was a child inside the xmlns which is again a child of an iFrame.
Related
My problem with this code is on the second click it desellects everything and does not select a particular item. I know it's because of the item_'.$x.'Active where even if I have a selectorReset() function it does not necessarily reset the value of each individual active back to 0.
I am aware that this is poor coding, could someone enlighten me with a better solution to having this kind of function? ^_^
example: click item 0 then click item 1 (it works fine as intended)
but if i go back to click to item 0 the activator is set at 1 which means the else in function selector will activate with the reset function so nothing is selected.
Question: How do I keep it selected?
Solution: a janky way of solving it hahha or could someone suggest a an already known concept? thanks ^_^
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="area">
<?php
$x=0;
while($x!=10){
echo'
<div id="item_'.$x.'" class="area__item" onclick="selector'.$x.'()">
'.$x.'
</div>
<script>
var item_'.$x.'Active = 0;
var item_'.$x.' = document.getElementById("item_'.$x.'");
function selector'.$x.'(){
if(item_'.$x.'Active == 0){
selectorReset();
item_'.$x.'.style.backgroundColor = "pink";
item_'.$x.'Active = 1;
}else{
selectorReset();
item_'.$x.'.style.backgroundColor = "";
item_'.$x.'Active = 0;
}
}
</script>
';
$x++;
}
?>
<script>
var item = document.getElementsByClassName("area__item");
function selectorReset(){
for(var i=0;i<item.length;i++){
item[i].style.backgroundColor="";
}
}
</script>
</div>
<style>
.area{
display:flex;
flex-wrap:wrap;
width:100%;
}
.area__item{
display:flex;
justify-content:center;
align-items:center;
height:5em;
width:5em;
border:1px solid black;
margin:1em;
cursor:pointer;
}
.area__item:hover{
background-color:pink;
}
</style>
</body>
</html>
Try this code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.area{
display:flex;
flex-wrap:wrap;
width:100%;
}
.area__item{
display:flex;
justify-content:center;
align-items:center;
height:5em;
width:5em;
border:1px solid black;
margin:1em;
cursor:pointer;
}
.area__item:hover{
background-color:pink;
}
</style>
</head>
<body>
<div class="area">
<?php
$x = 0;
while($x!=10){
echo'
<div id="item_'.$x.'" class="area__item" onclick="selector('.$x.')">
'.$x.'
</div>';
$x++;
}
?>
</div>
<script>
function selector(item) {
// Get the total Class length
var classLength = document.getElementsByClassName("area__item");
// First check any of the classes holds the style attribute, then remove it
for(var i = 0; i < classLength.length;i++){
var element = document.getElementById('item_' + i);
if (element.hasAttribute("style")) {
element.style.backgroundColor = "";
}
}
// Get the selected element by argument
// Then add classes to the selectedElement
var selectedElement = document.getElementById('item_'+item);
selectedElement.style.backgroundColor = "pink";
}
</script>
</body>
</html>
I'm using Wicket and I have followed this guide (and also this one) to build a webpage template.
My goal is to have a fixed header and footer and a dynamic <div> inside <body> that change its content when I change page by clicking on some menu links.
So at the end I have done something like this:
HomePage.html
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title wicket:id="title"> Title </title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div wicket:id="menu"></div>
<div wicket:id="homepageContent"></div>
<div id="content" wicket:id="template" class="">
<wicket:child/>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/myjs.js"></script>
</body>
</html>
HomePage.java
public class HomePage extends WebPage {
// Title of the current page
private String pageTitle;
public HomePage() {
// dynamic page title
add(new Label("title", new PropertyModel<>(this, "pageTitle")));
// ...
}
// ...
public String getPageTitle() {
return pageTitle;
}
public final void setPageTitle(String title) {
pageTitle = title;
}
}
Menu.java
public class Menu extends Panel {
public Menu(String id) {
super(id);
add(new BookmarkablePageLink<>("homepageLink", HomePage.class));
add(new BookmarkablePageLink<>("page1Link", Page1.class));
add(new BookmarkablePageLink<>("page2Link", Page2.class));
}
public Menu(String id, IModel<?> model) {
super(id, model);
}
}
Page1.java
public class Page1 extends HomePage {
public Page1() {
setPageTitle("Page1");
// ...
}
}
Page2.java
public class Page2 extends HomePage {
public Page2() {
setPageTitle("Page2");
// ...
}
}
The problem is that everytime I use my Menu to open a page (Page1 or Page2) the browser reloads all resources, I think it's due to Page1 and Page2 that are children of HomePage.
So, for example, one issue I have is that if I want my Menu to keep track of the page I'm currently visiting by setting a active class via javascript, I will have troubles because everytime I visit a page the js files (and all the others) are downloaded again and I loose all the logic I did.
I just would like to change the content of:
<div id="content" wicket:id="template" class="">
</div>
without refreshing all the rest of the page.
Is it possible to do that just by changing the Wicket approach?
Thanks
What you want to do is basically a Single Page Application. In this case page inheritance doesn't work well. You need to turn Page1, Page2, etc... into Panels and use AJAX to place them as page content (in your code wicket:id="template") when user clicks menu items.
You should to use <wicket:extend></wicket:extend> in parent markup. Something like:
<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title wicket:id="title"> Title </title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<wicket:extend>
<div wicket:id="menu"></div>
<div wicket:id="homepageContent"></div>
<div id="content" wicket:id="template" class="">
<wicket:child/>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/myjs.js"></script>
</wicket:extend>
<section id="content">
<wicket:child/>
</section>
</body>
</html>
<wicket:child> is used inside the parent’s markup to define where the children pages/panels can “inject” their custom markup extending the markup inherited from the parent component.
Now only the child markup will updating, I'm not completly sure, but looks like only child part updating.
I am using webstorage to save data.When i get the data through form & save it in a variable (in this case 'one') and try to display in the same page , it does that correctly. But when i import the same '.js' file and try to display it in a different page, it doesn't work. How to use webstorage to retrieve the data in a different page ? Also, i don't want to use query string !
First page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="webstorageAPI.js"></script>
<link href="webstorageAPI.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section id="leftbox">
<section id="leftbox">
<form action="seconddisplayfile.html" method="post">
<p>(key) One: <input type="text" id="one" /></p>
<p>(value)Two:<textarea id="two"></textarea></p>
<p><input type="submit" id="button" value="Save" /></p>
</form>
</section>
<section id="rightbox">
Nothing yet !
</section>
</section>
</body>
</html>
Second page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="webstorageAPI.js"></script>
<link href="webstorageAPI.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section id="wbox">
Nothing yet!
</section>
</body>
</html>
Javascript code:
// JavaScript Document
function doFirst(){
var button = document.getElementById("button");
button.addEventListener('click',save,false);
}
function save(){
var one = document.getElementById("one").value; //but only contents is to be taken not label n all
var two = document.getElementById('two').value;
localStorage.setItem("one",two); //Store in key-value pair. Anytime you use this you use if by addressing the variable ie key name.
//Retriveing data n displaying stored data
display(one); //now u hav stored two so its time to use one
}
function display(one){
var rightbox = document.getElementById('rightbox'); //refer right box
var two= localStorage.getItem("one"); //Get in key-value pair
rightbox.innerHTML= "Name of variable:"+one+"<br/>Value:"+two;
/*----Second page display-----*/
var wbox = document.getElementById("wbox");
wbox.innerHTML= "Name of variable:"+one+"<br/>Value:"+two;*/
}
window.addEventListener('load',doFirst,false);
#charset "utf-8";
/* CSS Document */
#leftbox{
float:left;
padding:20px;
border:3px solid #F20B84;
}
#rightbox{
float:left;
width:250px;
margin-left:20px;
padding:20px;
border:3px solid #8E1783;
}
Your second page doen't contain any element with id rightbox.so
var rightbox = document.getElementById('rightbox');
will return null.and when try to set innerHTML property of rightbox,js will throw
Uncaught TypeError: Cannot read property 'innerHTML' of null
so change your display to
function display(one){
var rightbox = document.getElementById('rightbox'); //refer right box
var two= localStorage.getItem("one"); //Get in key-value pair
if(rightbox)
rightbox.innerHTML= "Name of variable:"+one+"<br/>Value:"+two;
/*----Second page display-----*/
var wbox = document.getElementById("wbox");
wbox.innerHTML= "Name of variable:"+one+"<br/>Value:"+two;*/
}
You have to call display in second page .
I am new to java and want to create an editable combobox in which when user types in it the results come from database.
Like if I type "e" in combobox then all the name starting with "e" should come from database.
Please give a simple example.
You can use jQuery plugins, following example is for php just replace the php parts with java code, or have a look at this.
With JSON
$(document).ready(function() {
$(function() {
$("#search").autocomplete({
source : function(request, response) {
$.ajax({
url : "SearchController",
type : "GET",
data : {
term : request.term
},
dataType : "json",
success : function(data) {
response(data);
}
});
}
});
});
});
With DB
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Remote datasource</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
.ui-autocomplete-loading {
background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
}
</style>
<script>
$(function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#birds" ).autocomplete({
source: "search.php",
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="birds">Birds: </label>
<input id="birds">
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</body>
</html>
I have learned in last class that jsp's custom tags are replaced with html content after evaluation of custom tag.
But putting this concept in practice, I faced following problem.
I have 3 div inside a jsp , 2 of them are static and middle div has a custom tag in it. So html content generated by middle div's custom tag should be replaced in middle div only.
But, output suggests something else, please point me out if there is something wrong with the code, or the statement used in starting of question needs some modification.
home.jsp
<div style="height: 80px; background-color: #FFA500;">
<%# include file="banner.html"%>
</div>
<div style="height: 450px;">
<connect:dbConnector user="root" password="" url="jdbc:mysql://localhost/musicstore" scope="session">
</connect:dbConnector>
<connect:Query where="select * from musicstore.songs;">
<ui:addTable name="musicList">
<c:forEach var="value" items="${result }">
<c:set scope="session" var="currentRow" value="${value }"></c:set>
<ui:addRow data="currentRow" scope="session">
</ui:addRow>
</c:forEach>
</ui:addTable>
</connect:Query>
</div>
<div style="height: 80px; background-color: #FFA500;">Footer
content</div>
html content that i can see on web browser are
<table border="1" name=" musicList ">
<tr> <td>Tum hi ho</td>
<td>Arjit Singh</td>
<td>45</td></tr>
<tr> <td>Manjha</td>
<td>Amit Trivedi</td>
<td>30</td></tr>
<tr> <td>Ranjhanna</td>
<td>A.R Rehman</td>
<td>25</td></tr>
<tr> <td>Sawar Loon</td>
<td>Monali Thankur</td>
<td>20</td></tr>
</table>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div style="height: 80px; background-color: #FFA500;">
<img src="/WEB-INF/resources/music_banner.png" ></img>
</div>
<div style="height: 450px;">
</div>
<div style="height: 80px; background-color: #FFA500;">Footer
content</div>
</body>
</html>
AddRowTag.java
public class AddRowTag extends TagSupport {
// some getter, setter and other utility methods here.
#Override
public int doStartTag() throws JspException {
try {
System.out.println("AddRowTag--> doStartTag");
Row content = getDataToDisplay();
StringBuilder htmlContent = new StringBuilder();
htmlContent.append(startTableRow);
htmlContent.append(startTableData);
htmlContent.append(content.getTitle());
htmlContent.append(endableData);
htmlContent.append(startTableData);
htmlContent.append(content.getArtist());
htmlContent.append(endableData);
htmlContent.append(startTableData);
htmlContent.append(content.getPrice());
htmlContent.append(endableData);
htmlContent.append(endableRow);
System.out.println(htmlContent.toString());
pageContext.getResponse().getWriter().print(htmlContent);
} catch (IOException e) {
e.printStackTrace();
}
return SKIP_BODY;
}
}
Summarizing the problem:
Where(in context of location of placement of converted code(html code)) jsp custom tag code is placed in final html file.
What I need to modify in my current my current jsp code, if I want middle div should be updated on basis of custom tag.
Any suggestion/explanation is will be highly appreciated.
The tag should not write to the response directly. By doing that, it bypasses the JspWriter, which also writes to the response but buffers its output.
Replace
pageContext.getResponse().getWriter().print(htmlContent);
by
pageContext.getOut().print(htmlContent);