Can't inspect an element - html

i am trying to inspect an element . When i right click and inspect that element i see the below things
Screenshot1
Screenshot2
I tried below but it didn't worked for me
driver.findElement(By.id("tmsMobileId")).click();
Can someone please help me here.

It's possible the web page is not loading completely when the click() executes, so it won't be able to find what it is supposed to click on. You may need to sleep the script for a couple seconds.
Otherwise, take a look at this link:
How to click an element in Selenium WebDriver using JavaScript

Related

Google Tag Manager Image Clicks

I am using Google Analytics on a Sharepoint site. On the main page, we have an image in an image carousel that once clicked will bring you to a different page on the site. I have tried everything to track clicks on this image in GTM - click url, click ID, css selector, etc. I can not figure out why my trigger never fires. I have attached the
image, what pops up when I click inspect, and variables that show up with the click in GTM preview... (This is the second half of the variables in preview).Three images total.
Good job on including all the relevant debugging info.
Judging from your inspect, you're looking at the image.
However, judging from your click event inspection, the click lands on an a.
I don't see the a in your DOM on the screenshot, but it may be either dynamically added, or just outside of the screenshot.
No matter. Let's start to carefully debug it. Make a trigger that would be triggered on anything that matches a. That's just a debugging trigger. Make sure it triggers on your image clicks.
Now, let's just make a simple CJS variable that would console.log({{Click Element}}). No need to use it anywhere, just make it. Go to the debug view again, try clicking the banner again and look in the console for something that would look like this:
See that pretty element? Now the wonderful dev console allows you to copy JS path to this element and do whatever you want with it. Mainly, comfortably and quickly test CSS selectors against this element. I suggest changing the selector JS console generated. It should work (unless the page is too dynamic), but it would be fragile. Having the element, however, you'll be able to make your own selectors.

Selenium: How to deal with web elements that get hidden when you try to inspect them? Python 3.x related

I'm about to finish developing an automated program on Python and the only thing that's stopping me it's a web element that gets immediately hidden when I try to inspect it from an OpenSea page (can't share the link here since it requires to be connected to my wallet):
So far, I have only managed to get the XPATH and the CSS_SELECTOR of this problematic element (div#tippy-298) which is the following:
button_problematic_xpath = driver.find_element(By.XPATH, '//*[#id="tippy-298"]')
button_problematic_css = driver.find_element(By.CSS_SELECTOR, '#tippy-298')
But what I need is to get the XPATH or CSS_SELECTOR of the Web Elements that button_problematic_css contains, more specifically the "Starting" and "Ending" Textboxes :
Also, just in case, the element that's on top of button_problematic_css is called "Duration", here's its XPATH:
button_duration = driver.find_element(By.XPATH, '//*[#id="duration"]').click #after clicked it deploys div#tippy-298 element
I was wondering if there could be any method to force the visibility of this button_problematic_css using the Chrome Console in the Inspection of Web Elements, or by using an specific method from Selenium on Python3.x to inmediately download all of the web elements this page has right after button_problematic_css is visible.
What I have tried so far is to manually inspect the element, by pressing Ctrl + Shift + C and and then clicking the elements contained in button_problematic_css which just ends up hiding this element before even clicking its content, the same happens when trying to display the contents of this element in the DOM of this page, it just dissapears.
I just wish my program could be capable of editing the dates in the "Starting" and "Ending" Textboxes
I guess you need to click the button to show the element. why did I guess? you need to show the url
or u can also try this code:
clickmore=WebDriverWait(driver, 2).until(EC.element_to_be_clickable((By.XPATH, 'blabalabla')))
self.driver.execute_script("arguments[0].click();", clickmore)
button_duration = driver.find_element(By.XPATH, '//*[#id="duration"]').click()
After several days of working, I managed to solve this, it happened that in order to get the XPATH from these particular elements, I had to use the Chrome Console and type $('#duration').click();.
In this case, #duration is a Selector that can be used to get the web element button that allows you to edit the period of time you want to set when clicked.
I guess the general statement would be something like this:
$('#your_css_selector').click();
Now, this way I could managed to look deeper in the DOM without making them hide again.

Tab through a webpage manually

I am trying to navigate through a webpage using just my keyboard. Through the use of my tab key I can enter in data into several input boxes, and press several submit buttons.
However I run into a problem when trying to set focus to an image element on the page. For some reason it does not allow me to select it with the tab key. I can click on it with my mouse and then a popup appears but this really slows down efficiency.
I have considered creating a script in VBA to do this but right now I would prefer a quick-fix without having to spend hours developing a macro.
NOTE: I did quickly try to assign the reference to the <img> element and use the Click and Focus methods in VBA but that didn't work. I don't get an error, the code runs fine but nothing happens on the webpage. This leads me to think that this will be a bigger project than it appears, hence my reluctance to go down that path.
I did a bit of research and it seems that tabindex is not supported by the <img> element. Does that mean what I am trying to accomplish is impossible with the keyboard? Is code my only option?
If anyone knows anything that could help in VBA by all means I will take your advice into consideration.
Unfortunately the webpage is password protected and its a company account therefore I cannot post it.
After right-clicking inspect element in my Chrome browser this is what I see:
<img alt="View Quantities At Other Locations" src="/WebOrder/Images/CheckQtys.gif"
title="View Quantities At Other Locations" class="popup"popupdirection="upperleft"
popupwidth="380" popupcontent="#ProductQuantitiesForAccessibleBranches"
onbeforepopupcreate="onBeforePopupCreate_GetProductQuantitiesForAccessibleBranches(this)"
popupajaxformid="GetProductQuantitiesForAccessibleBranches"
onbeforepopupajaxpost="onBeforePopupAjaxPost_GetProductQuantitiesForAccessibleBranches(this)"
oncompletepopupajaxpost="onCompletePopupAjaxPost_GetProductQuantitiesForAccessibleBranches(this)"
productguid="00000000-0000-0000-0000-000000058927" displayitem="732899500"
brandguid="00000000-0000-0000-0000-000000000000" brandname="" brandsku="">
Does anyone have any ideas how I can set focus to this element (either with my keyboard or VBA)?
You can focus on a div using <div tabindex=0> Stuff Here </div>. Place the image inside the div and use the div to manipulate it.

Visual Basic - Autoclicker that doesn't use the cursor

So what I'm trying to make is something like this:
1).exe file has a web browser
2)web browser directs you to a button
3)i use the code "Dim elements = WebBrowser1.Document.GetElementById("nupuke420_kitchen")" to focus on the button
But that code was all i found from research. Can anyone please guide me on how do I actually make my program click on it every 3 milliseconds? Thank you
The answer is: "elements.InvokeMember("click")

how to inspect jquery code on chrome developer tools?

I use web developer tools to inspect html and subsequently see the css that is attached to the html element. This is proving to be a great process for learning from other websites (and the debugging my own)
Is there a way to inspect the javascript as well? So when I select the element, to be able to see the javascript related to the element?
In the element panel you can find all information related to an element including events attached to it.
You can use console in the element panel to inspect an element using dir(elementId)which dumps the object with the given id, as a JavaScript object with its properties.
You can see javascript code that is attached as event to any element on the page. In Developer tools its in the Elements tab and each element has "Event Listeners" - there you see what events and what javascript will be catched and executed.
I had the same problem and have been wandering a bit until I found how to do it on Chrome:
1. Open the Inspector Ctrl + Shift + i
2. Select the element that you would like to inspect
3. Click on the Event Listeners tab
4. Click on the link next to the event listener you would like to check
5. Click on Pretty Print (Symbolized as {} at the bottom of the window)