Im making a project for finding xpath, and i need the fastest and easiest way for the user to actually select in a webpage the element he wants the xpath to be found. Selection ideally needs to be made with just a click, which needs to return the value of outerHTML of that element,so I can take it and process against fullHTML of page to find any indicator.
For now, im stuck double-tapping element,pressing inspect element and copying, all manually, which is not good.I know to automate in selenium, but i haven't found a way to automate this process.
Any suggestion,idea or preferably answer would be greatly appreciated!
Thanks
You want to see the path to an element when you click on it? Something like this will work:
window.addEventListener("click", (e) => {
let element = e.target
let path = []
while(element.parentElement){
let i = [...element.parentElement.children].indexOf(element)
path.unshift(`${element.tagName}:nth-child(${i + 1})`)
element = element.parentElement
}
alert(path.join("/"))
})
Related
im trying to click the selected Element out of the HTML List.
HTML List
This is my code so far but I cant get it to work.
await page.click('.lhggkp7q.ln8gz9je.rx97191a[style^="z-index: 1"]')
Any help what I can change? Thanks in advance!
Try this.
await page.click('_3uIPm WYyr1 :nth-child(10)')
This selects the 10th child of the parent element you are trying to target.
I managed to solve it by digging a bit deeper and clicking a very specific Part of the one i wanted to click originaly
I would advise you to use XPATH element lookup
const [xpathElement] = await page.$x(XPATH);
await xpathElement.click();
I have a node application and I have a pug template that are coded up, the pug template represents one project, and within that are shown related targets (so a one to many relationship - one project can have many targets).
What I want to do, is have a user be able to click on the DOM element representing a target, and it open up a modal form or something similar, and allow it to be edited. I'm not sure of the best way to do this. So this is my pug template element for each:
each target in project.targets
.target__card
.target__avatar
h6.target__title= target.title
input#targetId(type='hidden' value=`${target._id}`)
So I've got my hidden id in there and it's all peachy. I want to be able to click on it and it open a form that can edit it and then submit to my endpoint. But if I have a javascript function like this:
const targetCard = document.querySelector('.target__card')
if (targetCard) {
targetCard.addEventListener('click', async (e) => {
const target = document.getElementById('targetId').value
console.log('target is ', target)
})
}
then this is only going to work for the first DOM element. But do I really need to loop through again, in my javascript, or something like that? I'm already looping in the template, and the information is ' just sitting there' already, I can see it. It seems wasteful to loop through it again in a js function, even if I did know the best way to do that (which I'm not sure I do). Is there something obvious that I'm missing? Can I embed a form in each element that can simply be hidden and unhidden? That seems a bit wasteful too.
I have a requirement to drag and item from a page and drop it at another location in the same web page which is developed in angular js
Can anyone let me know how do we do it in protractor?
This is pretty simple. You will need to use an action chain for this.
browser.actions().dragAndDrop(elem, target).perform();
you can take a look at this:
source = element you want to drag;
target = element where you want to drop the source;
browser.actions().dragAndDrop(source,target).mouseUp().perform();
Usually when I want to use a select element its pretty simple, I just go:
val selectCompany = new Select(driver.findElement(By.cssSelector("#company_id")))
selectCompany.selectByValue("975")
But in my case it dosen't work...
this is the html (the relevant part):
But I get error using the css selector, this is the error:
Exception in thread "main"
org.openqa.selenium.ElementNotVisibleException: Element is not
currently visible and so may not be interacted with Command duration
or timeout: 60 milliseconds
I tried to add Wait element but still not working...
I guess the issue is that the select element is hidden, can someone please helpppp
thanks
Execute this script before you try to find the element; something like this. Hope this help
((JavascriptExecutor) driver).executeScript(" document.getElementById('company_id').style.visibility = 'visible'; ");
I am working on Selenium WebDriver.
I need to point the mouse to an element and perform click on it and I want to use javascript here instead of Xpaths.
The javascript of that element is not a method so that I can just fire it directly.
I am confused how to create a javascript so that the method when auto-executed should go to that object (I want to point to that object using its javascript only) and perform click.
Element's javascript:
javascript:setParam(paramOrderNbr, '4');
go('survey_editing.jsp','actMoveItemUp);
Please help!
Kumar
try this:
String cssSelector =.... //css selector of the element you want click on
JavascriptExecutor js = (JavascriptExecutor) driver;
StringBuilder stringBuilder = new StringBuilder();
stringBuilder.append("var x = $(\'"+cssSelector+"\');");
stringBuilder.append("x.click();");
js.executeScript(stringBuilder.toString());
hope this works for you
Good job.
But try to modify a lil bit your css selector.
Try simply map[name="edit_1"]> area
But before you try to execute anuthing verify with firebug ( i use firepath, firebug addon in ffox) to verify that your css selector is correct.
Then try execute the code I mentioned above. It always works.
But also is possible to try another approach. If your selenium test is connected with pointing out web element with onmousehover action handling.
Then is possible to user action builder:
WebElement mnuElement;
WebElement submnuElement;
mnEle = driver.findElement(By.Id("mnEle")).click();
sbEle = driver.findElement(By.Id("sbEle")).click();
Actions builder = new Actions(driver);
// Move cursor to the Main Menu Element
builder.moveToElement(mnEle).perform();
// Giving 5 Secs for submenu to be displayed
Thread.sleep(5000L);
// Clicking on the Hidden SubMenu
driver.findElement(By.Id("sbEle")).click();
please inform as soon as you check this one.
I've made a little investigation on your problem. And now I'ma a lil bit frustrated.
Firebug is unable to locate anything which is contained in <script> tags.
See the picture below
So if we are unable of locating element using standard tree DOM model then the last assumption is left (in my opinion). I'll share only the idea I would implement if come across with your problem. Simply try to click on fixed coordinates using js.But this is considered to be bad approach. It is explained here
So returning back to the js locating coordinates to click you can use this
Using described part we locate x, y coordinates of the element we need to locate. And using this
you can actually perform the click.
Something like that:
JavascriptExecutor js = (JavascriptExecutor) driver;
StringBuilder stringBuilder = new StringBuilder();
stringBuilder.append("x.trigger("click", [x, y]);"); //where [x,y] you've already //obtained
js.executeScript(stringBuilder.toString());
By the way, you can get to know about advanced user actions here . I find it quite helpful in some cases.
But it still seems to me that somehow it is possbile to locate your needed element in DOM.
Hope my answer helps somehow)