Click on hidden element Selenium webdriver(javascript) - javascript

<tr id="mytr">
<td id="Table" onmouseover="this.className='menulevel1hl';" onmouseout="this.className='menulevel1norm'" class="menulevel1norm" onclick="PopupWin('Left',divMenu2011,this,'.menuitempopuprownormal','.menuitempopuprowhighlight','','.menuitempopupscroll' Alerts&nbsp </td>
<div id=" divMenu2011 " name="actiondiv " style="visibility:hidden;position:absolute;border: ">
<DIV myonclick="window.parent.location.href='/smcfs/console/exception.search' ; "> Alert Search</DIV>
</div>
<td id="Table " onmouseover="this.className='menulevel1hl' ; " onmouseout="this.className='menulevel1norm' " class="menulevel1norm " onclick="PopupWin( 'Left',divMenu2012,this, '.menuitempopuprownormal', '.menuitempopuprowhighlight', '', '.menuitempopupscroll'); "> Inventory </td>
<div id="divMenu2012 " name="actiondiv " style="visibility:hidden;position:absolute;border: ">
<DIV myonclick="window.parent.location.href='/smcfs/console/inventoryaudit.search' ; "> Inventory Audits</DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/inventory.detail?CurrentDetailViewID=YIMD080' ; "> Adjust Inventory</DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/itemsupsearch.search' ; "> Item Suppression Console</DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/additemsuppression.detail?CurrentDetailViewID=TGTOMSSCFD008' ; "> Add Item Suppression</DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/ProtectItem.detail?CurrentDetailViewID=TGTPID001' ; "> Add Protected Qty</DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/ProtectItem.search' ; "> Protected Qty Console </DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/ProtectItemAudit.search' ; "> Protected Qty Audit Console </DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/MCAFeeds.detail?CurrentDetailViewID=A001' ; "> Upload MCA Store Feed </DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/MCAFeeds.detail?CurrentDetailViewID=A002' ; "> Upload MCA Item Feed </DIV>
</div>
<td id="Table " onmouseover="this.className='menulevel1hl' ; " onmouseout="this.className='menulevel1norm' " class="menulevel1norm " onclick="PopupWin( 'Left',divMenu2013,this, '.menuitempopuprownormal', '.menuitempopuprowhighlight', '', '.menuitempopupscroll'); "> RTAM Exclusion </td>
<div id="divMenu201404150720371518959 " name="actiondiv " style="visibility:hidden;position:absolute;border: ">
<DIV myonclick="window.parent.location.href='/smcfs/console/Exclusion.detail?CurrentDetailViewID=D002' ; "> RTAM Exclusion </DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/Exclusion.detail?CurrentDetailViewID=001' ; "> Start RTAM Exclusion </DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/Exclusion.detail?CurrentDetailViewID=D004' ; "> Remove Excluded Items </DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/Exclusion.detail?CurrentDetailViewID=D003' ; "> Enter Exclusion Removal </DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/Exclusion.detail?CurrentDetailViewID=D009' ; "> Schedule RTAMExclusion </DIV>
</div>
<td id="Table " onmouseover="this.className='menulevel1hl' ; " onmouseout="this.className='menulevel1norm' " class="menulevel1norm " onclick="PopupWin( 'Left',divMenu2014,this, '.menuitempopuprownormal', '.menuitempopuprowhighlight', '', '.menuitempopupscroll'); "> Sales Order </td>
<div id="divMenu2014 " name="actiondiv " style="visibility:hidden;position:absolute;border: ">
<DIV myonclick="window.parent.location.href='/smcfs/console/order.search' ; "> Sales Order Console </DIV>
<DIV myonclick="window.parent.location.href='/smcfs/console/shipment.search' ; "> Outbound Shipment Console</DIV>
</div>
I am trying to click on Ship Order Console. Please find the code below
WebElement ele1 = driver.findElement(By.xpath("//tr[#id='mytr']/td[4]"));
ele1.click();
WebElement ele = driver.findElement(By.xpath("//div[#id='divMenu2014']/div[1]"));
String js = "arguments[0].style.height='auto'; arguments[0].style.visibility='visible';";
JavascriptExecutor executor = (JavascriptExecutor)driver;
executor.executeScript(js, ele);
System.out.println("element is " + ele.getText());
ele.click();
When I am printing the ele.gettext(), I am getting "sales order console", but when I am trying to click on it it is moving to inventory tab.
Could any one point out where it is going wrong?

Check this link to set attribute to web element,
How to use javascript to set attribute of selected web element using selenium Webdriver using java?
Alternatively, you can click using Javascript without making it visible. I have used CSS selector for your element.
executor.executeScript("$(\"div#divMenu2014>div\").click();");

Related

Get text with javascript textContent

I try to get text from a site, using javascript and textContent
i use this code
var markets=document.getElementsByClassName('sip-MarketGroup ')
for (var i=0;i<markets.length;i++){
try {
console.log(markets[i].textContent);
} catch (error) {
console.error(error);
}
}
a part of html into the site is this below
<div class="sip-MarketGroup">
<div class="sip-MarketGroupButton sip-MarketGroup_Open ">
<div class="sip-MarketGroupButton_Text " style="">Fulltime Result</div>
<div class="sip-MarketGroupButton_FavouriteButton sip-FavouriteButton ">
<div class="sip-FavouriteButton_SVG "> </div>
</div>
</div>
<div class="gl-MarketGroup_Wrapper ">
<div class="gl-MarketGroupContainer ">
<div class="gl-Market gl-Market_General gl-Market_General-topborder gl-Market_General-pwidth100 ">
<div class="gl-Participant gl-Participant_General gl-Market_General-cn3 ">
<span class="gl-Participant_Name">QPR</span>
<span class="gl-Participant_Odds">12.00</span>
</div>
<div class="gl-Participant gl-Participant_General gl-Market_General-cn3 ">
<span class="gl-Participant_Name">Draw</span>
<span class="gl-Participant_Odds">4.00</span>
</div>
<div class="gl-Participant gl-Participant_General gl-Market_General-cn3 ">
<span class="gl-Participant_Name">Bournemouth</span>
<span class="gl-Participant_Odds">1.36</span>
</div>
</div>
</div>
</div>
</div>
and i get
Fulltime ResultQPR12.00Draw4.00Bournemouth1.36
without spaces, how can i get this text but seperated with ";" like this
Fulltime Result;QPR 12.00;Draw 4.00;Bournemouth 1.36;
Why don't you use the method "innerText" instead?
And you can do the following:
var markets=document.getElementsByClassName('sip-MarketGroup ')
for (var i = 0; i < markets.length; i++) {
try {
console.log(markets[i].innerText.split('\n').join(';'));
} catch (error) {
console.error(error);
}
}
But you can always remove the .join(';') and just use the array to do whatever you need :) Maybe even string interpolation!
Give me a heads up if you liked my answer!
Happy New Year!
Pedro

Append Cells to Collection using Javascript

I currently am trying to simulate a mailbox and am using materialize in order to build it. Inside of my collection view, I am trying to add cells dynamically, but am unsure on how to proceed with appending html using Javascript.
<div class="row" id="mailBox">
<div class="container col s7">
<div class="collection-header center">
<h4>Email Box</h4>
</div>
<ul class="collection with-header" id="mailCollection">
<!-- Start: Trying to Dynamically Add These Cells To this view -->
<li class="collection-item avatar email-unread">
<span class="circle indigo darken-1"></span>
<span class="email-title"> Subject </span>
<p class="truncate grey-text ultra-small"> Message </p>
<span class="blue-text ultra-small">Date Recieved</span>
</li>
<!-- End of Cell Content -->
</ul>
</div>
</div>
I trying to append the collection items as such through my javascript, although nothing is appearing on the screen:
function createHTML(){
var jsonData = jsonObject;
for(var i =0; i < jsonData.length; i++){
$("#mailCollection").append('<li class="collection-item avatar email-unread">' +
'<span class="circle indigo darken-1"></span>'
'<span class="email-title">' + jsonData[0] + '</span>'
'<p class="truncate grey-text ultra-small">' + jsonData[1] + '</p>'
'<span class="blue-text ultra-small">' + jsonData[2] + '</span>
</li>')
}
}
As per your code, There are so many syntax errors in single and double quotes where you append the html. Please check below code without any syntax error.
function createHTML(){
var jsonData = jsonObject;
for(var i =0; i < jsonData.length; i++){
$("#mailCollection").append("<li class='collection-item avatar email-unread'><span class='circle indigo darken-1'></span><span class='email-title'>' + jsonData[0] + '</span><p class='truncate grey-text ultra-small'>' + jsonData[1] + '</p><a href='#!' class='secondary-content email-time'><span class='blue-text ultra-small'>' + jsonData[2] + '</span></a></li>")
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row" id="mailBox">
<div class="container col s7">
<div class="collection-header center">
<h4>Email Box</h4>
</div>
<ul class="collection with-header" id="mailCollection">
<!-- Start: Trying to Dynamically Add These Cells To this view -->
<li class="collection-item avatar email-unread">
<span class="circle indigo darken-1"></span>
<span class="email-title"> Subject </span>
<p class="truncate grey-text ultra-small"> Message </p>
<span class="blue-text ultra-small">Date Recieved</span>
</li>
<!-- End of Cell Content -->
</ul>
</div>
</div>

How do you turn the text in the html into a equation using jQuery?

I am creating a simple rpg game using jquery and am having issues with turning an string into a number that JS can run a equation from. So I have click events on each character so when the user chooses one, it changes the html to that characters stats in a spans. I would like to take those numbers and use them for my attack button.
I also would like to increase the damage of the main character each time the button is clicked by 4.
HTML
<div class="row">
<div class=" col-md-3 "><button id="atk">Attack!</button></div>
</div>
<div class="row">
<p class=" col-md-2 ">Health: <span id="Hp"></span></p>
<p class=" col-md-2 ">Damage Output: <span id="Damage"></span></p>
<p class=" col-md-2 ">Enemy Health: <span id="eHp"></span></p>
<p class=" col-md-2 ">Enemy Damage Output: <span id="eDamage"></span></p>
</div>
Jquery
$("#atk").click(function(){
foeHp= ($("#eHp").html());
foeDmg= ($("#eDamage").html());
mainHp= ($("#Hp").html());
mainDmg= ($("#Damage").html());
// console.log(foeDmg);
var enemyHp = eval(foeHp + (mainDmg -4));
Instead of eval, you're looking for Number() or parseInt(). You'd be better off parsing the variables themselves as integers, so you don't have to worry about doing so for every calculation:
$("#atk").click(function() {
foeHp = parseInt($("#eHp").html());
foeDmg = parseInt($("#eDamage").html());
mainHp = parseInt($("#Hp").html());
mainDmg = parseInt($("#Damage").html());
var enemyHp = foeHp + (mainDmg - 4);
console.log("You did " + mainDmg + " damage.");
console.log("The enemy now has " + enemyHp + " HP.");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-3">
<button id="atk">Attack!</button>
</div>
</div>
<div class="row">
<p class="col-md-2">Health: <span id="Hp">7</span></p>
<p class="col-md-2">Damage Output: <span id="Damage">2</span></p>
<p class="col-md-2">Enemy Health: <span id="eHp">3</span></p>
<p class="col-md-2">Enemy Damage Output: <span id="eDamage">4</span></p>
</div>
Never use eval(), as it can lead to serious security vulnerabilities. Remember, eval is 'evil'!
Hope this helps! :)

Adding ng-mouseover on a image from json file

I have the follwing code :
<div class="container" ng-controller="ListCtrl">
<div class="col-md-2-4" ng-class="{'div-hide': index > $index + 1}" ng-repeat="question in questions">
<div>{{question.qid}} {{question.question}} </div>
<div class="row">
<div class="col-lg-3 col-md-4 col-s-6 thumb" ng-repeat="image in question.images">
<div ng-mouseover="style={'background-color':'gray','cursor':'pointer'}">
<img class="img-responsive " id="{{image.imageid}} " src="{{image.imgpath}} " alt=" " >
</div>
</div>
</div>
</div>
<div class="keys">
<button type="button " class="btn btn-next " ng-click="index=index < questions.length ? index + 1 : questions.length ">Next</button>
<button type="button " class="btn btn-pre " ng-click="index=index> 1 ? index - 1 : 1">Previous</button>
{{index}}
</div>
</div>
In the img tag i have added a mouse over so that when the mouse goes over the image it will give gray background etc. however its not working. Does anyone know why?
UPDATEE
so ive edited it and tried adding css to the div but that does not seem to work either.. heres the updated plunker ..http://plnkr.co/edit/DqNRnc8xYZn73vdkWjaG?p=preview Please someone helpp!
Add this to your CSS:
#imgbutton:hover, #imgbutton:active {
background-color: gray;
}
This uses CSS to define a hover style.

jQuery - Passing data from a jQuery function to a specific div?

I'm trying to pass data from a function to a specific div, but I can't seem to be able to get this to work. I'm making a gallery viewer and I just want to pass the counter that I use to show the pictures and the total number of files for each gallery in the page.
Here is the code:
jQuery
$(document).ready(function () {
$('.photoset').each(function () {
$(this).data('counter', 0);
$items = $(this).find('img')
$(this).data('numItems', $items.length);
});
var showCurrent = function (photoset) {
$items = photoset.find('img');
var counter = photoset.data('counter');
var numItems = $items.length;
var itemToShow = Math.abs(counter % numItems);
$items.fadeOut();
$items.eq(itemToShow).fadeIn();
};
$('.photoset').on('click', function (e) {
e.stopPropagation();
var photoset = $(this);
var pWidth = photoset.innerWidth();
var pOffset = photoset.offset();
var x = e.pageX - pOffset.left;
if (pWidth / 2 > x) {
photoset.data('counter', photoset.data('counter') - 1);
if (photoset.data('counter') < 0)
photoset.data('counter', photoset.data('numItems') - 1);
showCurrent(photoset);
} else {
photoset.data('counter', photoset.data('counter') + 1);
if (photoset.data('counter') > photoset.data('numItems') - 1)
photoset.data('counter', 0);
showCurrent(photoset);
}
$(this).text(photoset.data('counter') + 1 + " de " + photoset.data('numItems'))
});
});
Html Razor
<div class="container">
#{ var i = 10; }
#foreach (var item in Model)
{
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<br />
#Html.DisplayFor(modelitem => item.NomeGaleria)
<br />
</div>
</div>
<div class="row"><div class="col-md-4 col-md-offset-4 text-center"><div class="nav-informer"></div></div></div>
<div class="row">
<div class="photoset center-block">
#{ var item2 = item.FilePaths;}
#for (var k = 0; k < Enumerable.Count(item2); k++)
{
<br />
<img src="~/images/#Html.DisplayFor(modelItem2 => item2[k].FileName)" style="#(k != 0 ? "display: none" : "" ) " />
<br />
}
</div>
</div>
}
</div>
So I'm trying to use this code
$(this).text(photoset.data('counter') + 1 + " de " + photoset.data('numItems'))
to pass the data to the "nav-informer" div, but it just won't work. Does anyone knows what to do in this case? Sorry if this is a dumb question, I'm very new to jQuery.
UPDATE
Here is the rendered HTML page:
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<br />
Galeria Um
<br />
</div>
</div>
<div class="row"><div class="col-md-4 col-md-offset-4 text-center"><div class="nav-informer"></div></div></div>
<div class="row">
<div class="photoset center-block">
<br />
<img src="/images/572fdd6b-13eb-48d2-8940-23da73e056c0.JPG" style=" " />
<br />
<br />
<img src="/images/018a55be-a8a7-4412-8415-1678d01eb6a2.JPG" style="display: none " />
<br />
<br />
<img src="/images/e5b0bdcb-d517-49a5-818b-245d46c0a0d9.JPG" style="display: none " />
<br />
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4 text-center">
<br />
Galeria Dois
<br />
</div>
</div>
<div class="row"><div class="col-md-4 col-md-offset-4 text-center"><div class="nav-informer"></div></div></div>
<div class="row">
<div class="photoset center-block">
<br />
<img src="/images/fdc2e9fd-978a-4150-87af-483e34f68798.JPG" style=" " />
<br />
<br />
<img src="/images/b17d169d-e5ed-45cd-9901-1d9dc294c873.JPG" style="display: none " />
<br />
<br />
<img src="/images/3ad1ae20-7102-4d69-b658-7b3d8cbfb9e8.JPG" style="display: none " />
<br />
<br />
<img src="/images/4ef03a84-da00-4f93-b3a2-839ac2ec9ac2.JPG" style="display: none " />
<br />
</div>
</div>
So, since you're new to jQuery, the use of $(this) basically means "the element that I've started the process with" which in your case is .photoset. So $(this) = $('.photoset')
If you want to make that line of text go into your .nav-informer div, you need to change $(this) to $('.nav-informer')
$('.nav-informer').text(photoset.data('counter') + 1 + " de " + photoset.data('numItems'));
UPDATE
So it seems you need to traverse through the hierarchy. Is each 'gallery' a .container? If so, try this:
$(this).closest('.container').find('.nav-informer').text(photoset.data('counter') + 1 + " de " + photoset.data('numItems'));
.closest() traverses up through the hierarchy trying to find the closest parent of the element you start with. (in our case $(this)).
'.find()' does the opposite, it goes down through the hierarchy to find the first instance of the element in question from the point before.
Add them together and what I like to do is .closest() to the parent of the element you're trying to find and .find() the element after that. I feel like doing .parents(), .children() and .siblings() gets messy.
UPDATE 2
Alright, I see now - The way you're exporting each gallery may get a bit dicey eventually, and if possible, I would suggest containing your gallery and informer into the same container, but if you're going to leave it like this, try this:
$(this).closest('.row').prev('.row').find('.nav-informer').text(photoset.data('counter') + 1 + " de " + photoset.data('numItems'));
So, using .parent() will traverse only a single parent, where if you needed to go farther up, you can use .parents() (with an S) or my favorite .closest(). Then, once you reach the level you need to go, you can use .siblings(), or in our case, since your .nav-informer is always in the .row before your .photoset, you need to use .prev(). This will select the div written directly before the div you are currently, at the same level.
Check This Fiddle to see a quick example.

Categories

Resources