Element is not visible - selenium

I'm trying to parse and manipulate some data via Selenium and java (using Firefox as a browser and Ubuntu as an os).
The HTML code:
...
<div id="someName1">
<div id="someName2">
<div id="someName3">
<a class="sendMessegeLink" onclick="open_win(...)" title="someText1">
<img style="padding-left:5px; vertical-align:middle" src="..."/>
someText1
</a>
</div>
<table class="areaTable">
<tbody>
<tr>
<tr>
<tr class="someName4">
<td colspan="4">
<div id="SomeUniqueId" class="someName5" style="display: block;">
<table class="someName6">
<tbody>
<tr>
<tr>
<td colspan="2">
<a class="sendMessegeLink" onclick="open_iframe('...)" title="someText2">
<img style="padding-left:5px; vertical-align:middle" src="..."/>
<!-- WANTED ("not currently visible") ELEMENT -->someText2
</a>
<span class="remark"> someText3</span>
</td>
</tr>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tr>
</tr>
</tbody>
</table>
</div>
</div>
...
I've been trying to click the element "someText2" of class "sendMessegeLink" with :
WebElement inputElement = driver.findElement(By.xpath(".//*[#id='SomeUniqueId']/table/tbody/tr[2]/td/a"));
than :
WebElement inputElement = driver.findElement(By.cssSelector(".personalDetailsTable .sendMessegeLink"));
and than by manipulating the DOM display attribute (after reading this ) :
javascriptExecutor js = (JavascriptExecutor) driver;
WebElement w = (WebElement) js.executeScript("return document.getElementByClassName('sendMessegeLink').removeAttribute('display');");
and lastly just by Thread.sleep(5000) before accessing element in case everything isn't loaded at the DOM (in addition to driver.manage().timeouts().implicitlyWait(sec, TimeUnit.SECONDS) that I use.
I get Element is not currently visible and so may not be interacted with

Try this
WebElement tmpElement= driver.findElement(elementLocator); // Try all your combination here
JavascriptExecutor executor = JavascriptExecutor)driver;
executor.executeScript(“arguments[0].click();”, tmpElement);

Related

How to ignore that clicking on a TD tag does not automatically redirect me to another view? Vue

I have a table where in each TR when I click it redirects me to another view with the detail, the idea is that I have never worked with Vue and I can't think how to disable the event when I click on the first TD tag of the table.
Before in Jquery I did it this way:
//Add onclick to TR
$('table tr').click(function(e) {
// Avoid redirecting if it's a delete button
if(!$(e.currentTarget).hasClass('delete')) {
// Not a button, redirect by taking the attribute from data-route
window.location.href = $(e.currentTarget).data('route');
}
});
But with Vue I don't know how to do it in the onclick event.
This is my table and the method
<table
id="accounts-table"
class="
table table-listbox
table-bordered_
table-responsive-md
table-striped_
text-center_
"
>
<thead>
</thead>
<tbody>
<tr v-if="tableData.length === 0">
<td colspan="4" class="text-center">
No hay oportunidades para mostrar.
</td>
</tr>
<template v-if="loading === true">
<tr colspan="9" class="text-center">
<b-spinner variant="primary" label="Spinning"></b-spinner>
<b-spinner variant="primary" type="grow" label="Spinning"></b-spinner>
</tr>
</template>
<template v-else>
<tr
v-for="(data, k) in tableData"
:key="k"
#click="viewOpportunity(k, data)"
>
<slot :row="data">
<td v-if="permissions.includes('view all opportunities')" width="10">
<div class="iq-email-sender-info">
<div class="iq-checkbox-mail">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="mailk">
<label class="custom-control-label" for="mailk"></label>
</div>
</div>
</div>
</td>
<td width="20">
<vue-avatar
:username="data.sales_man"
:title="data.sales_man"
:size="32"
v-if="data.sales_man != ''"
></vue-avatar>
</td>
<td width="5">
<template v-if="data.has_file != false">
<i
class="ri-attachment-line"
style="font-size: 20px; color: #007bff"
></i>
</template>
</td>
<td width="120" nowrap>
<template>
<p class="mb-0">{{ data.created_at }}</p>
<small class="text-info mt-5">
Fecha creación
</small>
</template>
</td>
</slot>
</tr>
</template>
</tbody>
</table>
viewOpportunity(data) {
window.location.href = "/opportunity/" + data.id;
},
For example in the first TD of the table I would like that it does not redirect me to the page but from the 2nd TD it redirects me.
On first td element use this even modifier - #click.stop
Prevent on click on parent when clicking button inside div
This kind of issue ever answered .. please have a look on this
If someone needs an href inside a table that has a that has a #click method in the row, but you wat to the link does not fire the click event in the row and also to prevent event propagation when there is no method to call, e.g. a simple <a href="mailto:someone#example.org"> link, try to use this trick with #click.self:
BEFORE
<table>
<tr>
<th>COLUMN A</th>
<th>COLUMN B</th>
</tr>
<tr #click="myMethodFromRow">
<td>Some Value</td>
<td>
<a target="_blank" :href="mailto:someone#example.org"> My link </a>
</td>
</tr>
</table>
AFTER
<table>
<tr>
<th>COLUMN A</th>
<th>COLUMN B</th>
</tr>
<tr>
<td #click="myMethodFromRow">Some Value</td>
<td #click.self="myMethodFromRow">
<a target="_blank" :href="mailto:someone#example.org"> My link </a>
</td>
</tr>
</table>
In this case I wanted to execute myMethodFromRow clicking inside each td, but not clicking the link. So I changed the myMethodFromRow method from the tr and put it into each td. But the most important trik was to use #click.self for the td with the href link.
.self only trigger handler if event.target is the element itself, i.e. not from a child element.
DOCUMENTATION: https://vuejs.org/guide/essentials/event-handling.html#event-modifiers

How to click on inneHTML String with Selenium?

I am iterating throw a table getting the rows:
<div class="table-responsive">
<table class="table table-striped" id="noteTable">
<thead>
<tr>
<th style="width: 20%" scope="col"></th>
<th style="width: 20%" scope="col">Title</th>
<th style="width: 60%" scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr id="notes" th:each="note : ${notes}">
<td>
<a class="btn btn-success" id="btn-edit-note"
th:onclick="showNoteModal([[${note.id}]],
[[${note.noteTitle}]], [[${note.noteDescription}]])">Edit</a>
<a th:href="#{|/home/delete-note/?title=${note.noteTitle}|}"
id="btn-delete-note" class="btn btn-danger">Delete</a>
</td>
<th scope="row" th:text="${note.noteTitle}"></th>
<td th:text="${note.noteDescription}"></td>
</tr>
</tbody>
</table>
</div>
With this code written below :
public void deleteNote(String title, String description) {
WebDriverWait wait = new WebDriverWait(driver, 2);
WebElement btnDeleteNote;
js.executeScript("arguments[0].click();", tabNotes);
WebElement homeWait = wait.until(webDriver ->
webDriver.findElement(By.id("btn-delete-note")));
for (WebElement note : notes) {
String noteTitle = note.getAttribute("innerHTML");
System.out.println(noteTitle);
if (noteTitle.contains(title)) {
js.executeScript("DELETE NOTE HERE);
}
}
}
When I get the row innerHTML I receive this result as String :
<td>
<a class="btn btn-success" id="btn-edit-note" onclick="showNoteModal(1,
"Note Title Test", "Note Description Test")">Edit</a>
Delete
</td>
<th scope="row">Note Title Test</th>
<td>Note Description Test</td>
- My question is: Thinking that the lines of a Table are Dynamic, how can I click on "< a >" tag element in the string row?
The element has to be unique because it has an id so you can just target it like this:
element = driver.find_element_by_id("btn-delete-note")
print(element.text)

Unable to locate element using xpath

Am very new to Selenium just learnt few things and trying to automate.Unable to locate an element in Selenium webdriver for the below one:
<div class="navBg withSubMenu">
<table id="topnav" class="navTable" cellspacing="0" cellpadding="0" style="-moz-user-select: none; cursor: default;">
<tbody>
<tr>
<td class="logoCell navCell" valign="top">
<td class="navItem navCell relative selected">
<td class="navItem navCell relative notSelected">
<a class="content tasks" href="/tasks/otasklist.do">
<div class="label" style="z-index:155; ">TASKS</div>
<div class="img"> </div>
</a>
</td>
<td class="navItem navCell relative notSelected">
<a class="content reports" href="/reports/reports.do">
</td>
<td class="navItem navCell relative notSelected">
<td class="menuCell navCell" valign="top">
</tr>
<tr class="secondLevelRow">
</tbody>
</table>
I have written code like
driver1.findElement(By.xpath("//*[Contains(#class,'content tasks')]")).click();
Anyone please help me.
And also please suggest some sites or links to learn more about locators especially xpath. I tried few but not getting it in depth.
Thanks in advance.
Start contains with a lower case c:
driver1.findElement(By.xpath("//*[contains(#class, 'content tasks')]")).click();
<a class="content tasks" href="/tasks/otasklist.do">
driver1.findElement(By.xpath("//a[#class='content tasks']")).click();

I want to extract a text string on the webpage which is written in the form of table, but I am getting null in return

WebElement e5 = d1.findElementByXPath("/html/body/div[1]/div[3]/div/div[1]/form/div/div[1]/div/table/tbody/tr[4]/td[2]");
String a = e5.getText();
System.out.println(a);
_____________________________________________________________________________
I have used getText method. The data is stored in the table, so the strategy which I am making use of is that first of all i want to get to the location of that data using xPath funda and then I need to extract the data corresponding to that location. Can anyone suggest a better way to do so.Thanks in advance.
pls find below the html:
<div class="wrapper">
<form method="post" action="">
<input id="_csrf" type="hidden" value="psJdnI5AnxjGqT2knrZG" name="_csrf">
<div class="innercontainer">
<div class="leftpanel">
<h2>MY ACCOUNT</h2>
<div>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<tr>
<td>
<strong>Membership ID:</strong>
</td>
<td>2800000101</td>
</tr>
<tr>
<tr>
<tr> </tr>
<tr>
</tbody>
</table>
</div>
</div>
<div class="rightpanel">
</div>
</form>
</div>
html page added above. Kindly suggest some alternative
You need to clean up your Xpath, however this should help
WebElement tableText = driver.findElement(By.xpath("yourXpath"));
String actualText = tableText.getAttribute("textContent");
System.out.println(actualText)

Identification of dynamic grid with extjs code in selenium webdriver

I have a dynamic grid populating with Extjs code, for which the element IDs are not visible. Can some one let me know how to find the element i am using selenium webdriver to code. Thanks in advance.
I have added HTML code as i was unable to paste as an image. This HTML is the grid area with which the dynamic grid is displayed.
No Element is available in the HTML except for body elements
<div id="ext-comp-1117" class=" x-panel">
<div id="ext-gen127" class="x-panel-bwrap">
<div id="ext-gen128" class="x-panel-tbar x-panel-tbar-noheader">
<div id="ext-comp-1118" class="x-toolbar x-small-editor x-toolbar-layout-ct">
<table class="x-toolbar-ct" cellspacing="0">
<tbody>
<tr>
<td class="x-toolbar-left" align="left">
<table cellspacing="0">
<tbody>
<tr class="x-toolbar-left-row"></tr>
</tbody>
</table>
</td>
<td class="x-toolbar-right" align="right"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="ext-gen129" class="x-panel-body x-panel-body-noheader"></div>
</div>
</div>
</div>
</div>
</div>
I cannot add comments yet, but could you please provide more information:
1. Sample of html?
2. elements not visible but are they present in html?
THanks
Try using Ext.ComponentQuery.query to fetch the id at runtime.