Develop Reference

Get outer-HTML of element on click

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("/"))
})

Puppeteer select option from drowpdown menu using xpath

I'm trying to select one of the optiones from this menu:
Let's say I want to click on the "Online Webinar" option.
I have to click on the input to open up the dropdown menu
I have to target the option that I'm looking for using waitForXPath, that means that I'm targeting elements for it's text content, not by class or id
This is my HTML structure:
And this is how I'm targeting the "Online Webinar" in my code:
And this is the what I'm getting from this code
As you can see, is not selecting the "Online Webinar" option, and I think that it's because there's a whitespace at the beginning and end of the string that I'm looking to target and I think this is the problem
However I don't know to workaround this issue, should I look for a way to use the trim() method, or there's a Puppeteer way to get around it?

I found a pretty simple solution
let venueOption = await page.waitForXPath(`//li[contains(text(),'Online Webinar')]`);

Printing Elements from Repeaters

So I am brand new to programming in both Javascript and just started working with QA testing. My goal right now is fairly simple. I want to make sure that all elements are loaded in the repeater before I make my selection from the list. I wanted to wait until the first and last element were present before proceeding with my test.
I know there are probably better ways to do this, feel free to throw suggestions at me. I've been looking around online and found code snippets detailing how to print to the console the values of elements within repeaters.
I figured I'd first just try to print out the first and last element to make sure I was getting them correctly. I did this:
var repeaterElements = element.all(by.repeater(repeaterObj));
var text = repeaterElements.first().toString();
console.log(text);
My goal being just to simply print the first element. However I got it to print [object Object] instead. Am I reasoning through this incorrectly? I thought that '.first( )' would give me the first element within the repeater!
-hopper

I'm not 100% sure what you are wanting, but I think this is it. This should go through a repeater, select all elements, get the text of those elements and console it out. If you are actually going to be doing anything other than consoling, remember to keep your promises!
element.all(by.repeater(repeaterObj)).each(function(obj){
obj.getText().then(function(text){
console.log(text)
});
});

How to get to a select element when its hidden?

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'; ");

Problem with jQuery - error when trying to find 2 tags

I have the following DOM structure:
/*:DOC += <div id='testDiv' class='testDivClass'><div id='innerTestDiv'></div></div><span id='testSpan' class='testSpanClass'><span id='innerTestSpan'></span></span>
Now I tried to run jQuery select against them as follow. The first one returned alright, but the second one failed:
// works
var result = $('#testDiv')[0];
alert(result.id);
// failed: id is null or not an object
var result2 = $('#testSpan')[0];
alert(result2.id);
I tried selecting id instead of class and got the same results.
My question is: how can I get the second select to work? Is there some sort of invisible iterator/pointer in jQuery which I need to reset to the beginning of the DOM before the second select?
Thanks.
EDIT: Ok this is the official "does not work" version. testDiv matched, but testSpan did not, hence I got an error saying id is null or not an object error in the second alert.
UPDATE: I did a test by swapping testDiv and testSpan in the html. Now BOTH select failed.
UPDATE2: I have changed the html back to what it used to look like. I'm using JsTestDriver to write up the test, but it is actually not calling anything at the moment. The actual html looks messier than this (more nested tags). I'm trying to get this simplified version to work first. It appears that jQuery was able to get into the first select, whether it'll be span or div, but couldnt get out of it to do the second select. I've replaced jQuery.js and jsTestDriver.jar to no avail.
Thanks.

The .className selector matches by class, not ID.
Therefore, $(span.testSpan) won't match any elements.
You need to change it to $('span.testSpanClass') ot $(span#testSpan') (using the #id selector, which matches ID).
For more information, read the documentation.

I don't know why, but for me your code worked well.
I added $(document).ready(function() { before that code, and when I opened the test page, the alert box showed up perfectly, both of them! I don't know when do you want this alert box showed, but if it is when visitor open the page, just add that code. Otherwise, add
function objectid() {
var result = $('#testDiv')[0];
alert(result.id);
var result2 = $('#testSpan')[0];
alert(result2.id);
}
That code worked well for me, too.
PS: Sorry if you don't understand my bad english.

More than likely, there is something else wrong with the HTML you're actually using. Since you're posting only a tiny bit of the html, we can't actually test your problem. Post the entire page, or at least the smallest piece of it that actually has the problem when you run your test.

I tested the jQuery code you reported on JS Bin, and the code worked fine. As the code is very basic, I don't think the problem is caused by the version of jQuery used.

What I ended up doing is wrapping the entire html with a div or span tag. I found that jQuery could not get out of a div/span tag once it gets into one (in my above example), so I just make it to go into a div/span tag once.
Not sure whether this is a patch or ugly fix, but it solved my problem for now.
Thanks for all the help!

Use "#" to select by id, use "." to select by class...