How can i find element from the Image using Webdriver? - selenium

I want to find an element for the bars present in the image but when i try to find the element the whole image is shown as an element. However when i hover mouse over a bar then then popup is shown. I need the value shown in the bar. So that can verify the same on other location.
Is there anyway i can do this? I am using webdriver with Java to automate this.
Here is the HTML code for the image. I cannot see child elements as it rendered as image only using(Dev express).
<div id="ctl00_MainContent_panelCallback_chart" onmousemove="__chartMouseMove(event, 'ctl00_MainContent_panelCallback_chart')" onclick="__chartClick(event, 'ctl00_MainContent_panelCallback_chart')" style="height:330px;width:500px;">
<img id="ctl00_MainContent_panelCallback_chart_IMG" src="/ManageTRM/DXB.axd?DXCache=254a85bb-62ad-4ab0-8c32-9e4b53aefc4b" alt="The Aging chart showing Deferred series, Revisit series, Carry Over series, New series, Removed series, Utilized series, Centralized series." /><input type="hidden" name="ctl00$MainContent$panelCallback$chart$CallbackState" id="ctl00_MainContent_panelCallback_chart_CallbackState" />

Related

Using Selenium with Java on Salesforce Lightning / Javascript problems

We had Selenium tests running on Sales Force non Lightning. Now I am converting to Lightning. There is a chain of menus to go through. I have successfully navigated to a certain menu, but now I have run into a problem. This is not the standard question about new element names. Here is the question. This is a small piece of what the page looks like (see below).
When using inspect with Chrome I can find the elements. This is what it looks like (a small cross section corresponding to above). The SPAN tag has the label ("Original Agreement") and the DIV below it will contain the box for the input value.
<div class="slds-form-element__control" data-aura-rendered-by="228:1224;a">
<div data-aura-rendered-by="1108:0" class="uiInput forceSearchInputLookupDesktop uiInput--default" data-aura-class="uiInput forceSearchInputLookupDesktop uiInput--default">
<label class="label inputLabel uiLabel-left form-element__label uiLabel" for="157:1224;a" data-aura-rendered-by="1103:0" data-aura-class="uiLabel">
<span class="" data-aura-rendered-by="1104:0">Original Agreement</span>
<!--render facet: 1106:0--><!--render facet: 1107:0--></label>
<div data-aura-rendered-by="161:1224;a"><div class="contentWrapper slds-box--border" data-aura-rendered-by="162:1224;a">
However, Selenium can not find the elements (though inspect does). When I did a "View Page Source instead of an
inspect, almost the entire thing is in JavaScript like this:
function rewriteAndInjectCss(linkEl, source, varLookup) {
var css = rewriteCssVars(source, varLookup);
injectStyles(linkEl, css);
}
but a lot more. Almost all functions, with maybe only a couple elements.
In the past when I have seen something similar there is often an iframe to switch to to get the elements. But there is no iframe to switch to. So I am stuck how to get these. Can anyone shed some light?
OK. Found it. I needed to do a driver.switchTo().defaultContent()

Cytoscape.js lifecycle(?) issues when iterating through edge.data() for editing

I'm working on a feature to edit an edge's data in Cytoscape.js. I have the same for editing a node's data, and it's working perfectly! But when I try to do the same for an edge, it doesn't.
Chrome: 70.0.3538.110
Cytoscape.js: 3.2.16
Node.js: 8.10.0
Angular: 6.1.2
Here's my simplified code:
Node editing:
<form #form="ngForm" autocomplete="off">
<div *ngFor="let field of buildDisplaySet(selectedElement) | keyvalue" class="search-input">
<label>
{{field.key}}
</label><br/>
<input [name]="field.key"
title="{{field.key}}"
[value]="field.value"
[(ngModel)]="field.value"/>
</div>
</form>
This form iterates over the selectedElement (in this case a Cytoscape node)'s key/value pairs in node.data(), and creates an input field for each. When live, this template is rendered only once and allows for editing the values in the input fields (as expected).
Now, my attempt to do the same for a Cytoscape edge is exactly the same:
Get the key/value pairs for edge.data() through buildDisplaySet()
Put each key/value pair into an input element
When live, and dealing with edges, the above template renders, but is constantly recalculated in the browser such that I can't highlight an input or enter a new value.
Here are some screenshots of the console:
Working node data template
Constantly recalculating edge data template, that won't let me focus on input fields
I thought that maybe it had something to do with the way edges are drawn on the Cytoscape canvas (hence my lifecycle(?) in the title), but I'm at an absolute loss as to why it's not working. Any help would be greatly appreciated!
This situation was related to the custom pipe we were using and NOT anything Cytoscape.js related!! Thank you for looking anyway!

Does the OpenERP version of ReportLab's RML support frames?

I want to add a sidebar or a header to some of my reports in OpenERP. The ReportLab user manual (PDF), describes the <frame> and <nextFrame> tags. Are they fully supported in OpenERP? I've gotten some things to work, but one frame just flows into the next, so a report that takes more than one page ends up with overlapping text.
After a bunch of digging in the code, I have frames working in OpenERP 5.0. The key feature I had to find was the last="true" attribute for a frame definition. That means that the frame should assume it's the last frame on the page. Any text that overflows it will flow to the first frame of a new page, not to the next frame on the current page. I ended up setting it true on all my frames. To see an example with frames, here are some snippets from our balance sheet report.
<template
pageSize="(8.5in,11in)"
title="Test"
author="Zaber Technologies Inc."
allowSplitting="20">
<pageTemplate id="first">
<frame
id="first"
x1="1.3cm"
y1="0.2cm"
height="27.5cm"
width="14.0cm"
last="true"/>
<frame
id="upper_right"
x1="14.1cm"
y1="21.53cm"
height="5.2cm"
width="5.0cm"
last="true"/>
</pageTemplate>
</template>
This section specifies your page layout. By default, text will start in the first frame in the list. y1 is the distance from the page bottom. You can specify a page template in two places: within the report itself, or within the headers defined in the company configuration. If you use a header, the report's first page template will be replaced by the header's page template, so the report's template can just be a pageTemplate tag with an empty frame tag in it. The company headers can only use one page template, but each report can define more than one page template.
When you want to put something in one of the other frames, use setNextFrame and nextFrame.
<setNextFrame name="upper_right"/>
<nextFrame/>
You don't have to use the frames in order. You can switch to an earlier frame in the list, and it won't start a new page.
For more details about changing the header, see the documentation or the question on user-defined headers.

Change Global Variable onclick/img source update with javascript variable

First off I am completely new to Javascript but I have some HTML/CSS experience. I've been trying to create an html/javascript image gallery for a website; (It would probably be a lot easier to do in PHP but the web coordinator disabled PHP on our server for security reasons).
Anyway What I have is a page showing an Album-list, Album-browser and Photo-viewer in different a div and 2 iframes respectively. I have it set up so that when someone clicks on an album from the album list, a page is opened up in the album browser section (iframe:"browser-frame" showing thumbnails of all the images in the particular album). I've been trying to set it up so that when someone clicks on an image in the album browser the image will appear in the Photo-viewer section (iframe:"viewer-frame" showing the photo itself).
I didn't want the photo's in the viewer-frame to be larger than the set dimensions for the viewer-frame so I created a page for the viewer-frame that puts the image in a div with a class of set dimensions (defined in a stylesheet) as follows:
...<body>
<div class="photoview">
<img id="viewed_image" class="large" src="images/album1/1.jpg" />
</div>
</body>...
I then created a script that updates the image src to a variable:image_to_be_viewed and called it image-changer.js
// JavaScript Document
{
var image_to_be_viewed="images/album1/1.jpg";
document.getElementById("viewed_image").src=image_to_be_viewed;
}
And added a script to the viewer-frame page so it looks like:
...<body>
<div class="photoview">
<img id="viewed_image" class="large" src="images/album1/1.jpg" />
<script src="image-changer.js"></script>
</div>
</body>...
Now I wanted the gallery to work so that in the page loaded in the browser-frame, whenever one clicked on one of the pictures, the value of the global variable 'image_to_be_viewed' would be changed to the source of the clicked image as follows:
<body>
<div class="photobrowse">
<img class="medium" src="images/album1/1.jpg" onClick="image_to_be_viewed='images/album1/1.jpg'"/>
<img class="medium" src="images/album1/2.jpg" onClick="image_to_be_viewed='images/album1/2.jpg'"/>
<img class="medium" src="images/album1/3.jpg" onClick="image_to_be_viewed='images/album1/3.jpg'"/>
</div>
</body>
It doesn't work....
the gallery i'm working on is on http://ptc.tamu.edu/test/gallery_directory/test_gallery.html
everything up to the loading of the selected picture in the viewer frame works (I'm running the onlick event on the default loaded pictures 1,2,3 in the browser-frame page)(default pic's 4 and 5 simply load the image in the iframe but with no way to adjust the size it is too big and gets cut off and i don't want that)
I've been working on for an entire day and I'm sure I'm doing something wrong here but I can't figure out what exactly it is. I have a feeling it has to do with changing the global variable: image_to_be_viewed from the browser-frame page but I wanted to confirm with experts instead of flopping about like a headless fish. I'm going to continue trying to figure this out but i thought maybe having some expert assistance would speed up the process.
What the onclick triggers should be a javascript function call.
e.g. onclick="changeImg('images/album1/1.jpg')"
And the function itself should looks like this
function changeImg (image_to_be_viewed) {
document.getElementById("viewed_image").src = image_to_be_viewed;
}
btw, you probably should learn javascript a little bit more before work on something real. I recommend this book
thank you I got it to work! I figured that the changeImg function was targeting the wrong document/wrong frame and I fixed it by changing the js script to:
function changeImg (image_to_be_viewed) {
window.parent.viewer_frame.document.getElementById("viewed_image").src = image_to_be_viewed;
}

Selenium - How to match image presence and location on page

My query is that - I have my images on webpage- a logo or say navigation bar i can store as an image. Can i test using selenium presence of these images on a webpage when loaded along with the position of the image on page.
What my issue is that i need to actually look at image objects in HTML and also may be images not in HTML but they are partial screenshots of webpage which i want to match. This test will help me pick alignment issues - in case my navigation bar is now going to second row i can match with previous stored image to check.
Thanks
VB
An example on how to check if a particular image is present:
In this page:http://www.google.ie/firefox?client=firefox-a&rls=org.mozilla:en-US:official
Selenese command
Command: verifyElementPresent
Target: //td/table/tbody/tr/td/table/tbody/tr/td/img[#src='/images/firefox/Fx4Launch.png']
Hint: If you want help to get the XPath for a particular element I recommend you using a plugin like Firebug (http://getfirebug.com/)
Put an extra "\" in the beginning of the xpath copied by Firebug, otherwise selenium do not find the element.
You can verify that an image is at a location like so:
verifyElementPresent //div/p/img
This example uses XPath to locate an <img> element that follows a <div> and <p> tag.
But verifying that a screenshot is the same as the rendered page? You're talking about a completely different problem, which is image recognition. Selenium is a tool for automated acceptance testing.