I defined a function that I run using Chrome console.
So I would type my_function() then hit enter to call my function.
Sometimes I need to call my function many times (the exact number is unknown), so I'll repeat up enter to repeatedly call my function.
I was wondering if I can let my function write my_function() at the prompt after it's execution, so that I'll just need to keep hitting enter to call my function however many times I want?
I don't know much about JavaScript, so my approach could be totally wrong.
I'd insert a button into the document instead, then click that button as needed:
const button = document.body.appendChild(document.createElement('button'));
button.textContent = 'click me';
button.addEventListener('click', my_function);
If you want to be able to do this sort of thing automatically (have the button inserted on pageload without having to type the code into the console yourself every time), put it into a userscript.
First thing first I am ok with the first solution. But in case you really want to stay in the chrome devtool why not using snippets they are the perfect tool for what you what:
-Go to the snippet pane. Write a snippet of your function.
-Call it.
-Keep running it by clicking or use Control+Enter or Command+Enter.
Another solution can be stackoverflow site. Go to any question. your for example in the answer part click on javascript/html/css snippet and do your thing
Related
I am attempting to write a script to automate some tasks on a third party site. The very first step is simply clicking a div on the nav, but document.getElementById('myId').click() does nothing.
In my searching I found this answer that fully simulates a mouse click: Simulating a mousedown, click, mouseup sequence in Tampermonkey?
However, that also does not work. I did notice that there's a class added when hovering, and the script successfully simulates that. And obviously physically clicking works fine. I'm not sure what else I could be missing
Edit: It turns out that the clicking was just fine, but the site is actually checking pieces of the event such as the coordinates, which is why it appeared to not be functioning properly
If I understand correctly, what you want is this:
document.getElementById('myId').addEventListener('click', myFunction);
This will run the function myFunction() when the element with the ID of "#myId" is clicked.
Hope this helps!
P.S. If this doesn't work, I suggest using Shashank Bhatt's suggestion of checking pointer-events.
Is there any way to directly spot what line of code is being executed (javascript) when clicking a button in a webpage or scrolling down .. etc?
For example: Not onMouseClick function when clicking a button and doing debug via browser in the same time but some function like $('#xx').click() instead.
If so, How?
Thanks in advance.
I've always battled to find this feature in Chrome, I'm sure it's in there, somewhere but no one seems to be able to find it. In Firefox is quite easy: Inspecting an element will show if it has an event attached, and will even show the code. Clicking the arrow next to the file and line number will jump to that location inside the debugger.
I am a lowly operations employee without authorization to change the programs and permissions on my machine, and I would like to automate some highly repetitive data entry. I know there are a lot of programs that can do that, however, for the sake of this discussion we'll assume that I'm not allowed to have any of them and I can only script through the debug F12 menu in Chrome. I also probably don't understand half of these words as well as I should.
I have to run test cases on a third-party vendor's highly dynamic website, and I've already successfully written javascript which adds texts to elements in the DOM and presses the "next" button.
The problem is, upon .click()ing the "next" button, it takes time for the page to update, and the update creates new elements which weren't in the DOM when the script was initialized. I need to find a way to delay the execution of the script until the DOM contains all the elements I need to update.
As a really, really crude proof of concept I wrote the pre-filler for each page as a function, and I serially called each function at the end of the previous function, using setTimeout(nextfunct, 10000) to let the page update before executing the next line. (I was going to refine that by trying to create some kind of object listener instead of an arbitrary 10 second delay, but I wasn't even able to get that far.) This approach creates two errors.
1) The script seems to be checking whether the elements are on the DOM before the end of the setTimeout(), so it still gives me an error. If nextfunct is defined as
document.getElementById("doesntexistyet").value = "Fill Me";
console.log("nextfunct ran");
I will get the error message stating there is no element with the id "doesntexistyet" immediately, not after a delay of 10 seconds. The element on the next page will not update.
2) The DOM updating interrupts my script. In the above code, the console output will not ever appear in my console. If I comment out the missing element, so the function only prints a comment, it will still not appear in my console. However, if I comment out the code and I switch the setTimeout to 1ms, "nextfunct ran" will appear in my console, until the page updates, at which time the console will be deleted.
Are there ways around this which I can implement using only vanilla JS and a browser? I'm sure there's a keyword I can search for where someone has discussed this before, but it seems like the vast majority of JS autofilling discussions are oriented towards people designing code to be integrated into a website,
Thanks
I'm trying to log into this site. But I can't even fill the textbox with the username.
I tried:
implicit and explicit waits
executing JavaScript
Structure of the textbox
The username is enclosed within a td tag, which can be located using its width attribute. The textbox itself is represented by two input tags. The first one is hidden. Both have style attributes. The first one has an initial value of display: none;, which is changed to display: inline-block; when I click on the textbox. And the style attribute of the second input tag is set to display: none;. Again, both these are toggled once the username textbox loses focus.
Waits
I tried using both implicit and explicit waits. The code implementing explicit wait resulted in a TimeoutException error:
wait = WebDriverWait(driver, 10)
elem_username = wait.until(EC.visibility_of_element_located((By.ID, 'txt_username')))
Executing JavaScript
Both the input tags have onfocus and onchange attributes. I didn't bother about the latter (my goal was to get keystrokes into the textbox first). The onfocus has a value of SetEnd(this). So, I tried to execute that.
The problem I had is that I couldn't find any documentation that could help me executing JavaScript. So I looked at a few related answers here at StackOverflow. I tried this first:
elem_username = driver.find_element_by_id('txt_username')
driver.execute_script('SetEnd(this)')
Of course, I knew it wouldn't work, because I was not referring to the element. So after browsing a few more questions, I learnt that execute_script took arguments. So I modified the code, which raised an error that said something like the script had no function like this:
driver.execute_script('arguments[0].SetEnd(this)', elem_username)
Then, I saw an answer using 'click()' inside the execute_script; so I tried that, too:
driver.execute_script('arguments[0].click()', elem_username)
The 'click()', I guess, is only for buttons. But since I had to "click" in the textbox to bring it in focus, I thought it would work. It didn't.
This is the last line I executed in all of my attempts, which, without an exception, kept raising ElementNotInteractableException error:
elem_username.send_keys('blahblahblah')
Requirements
The Q&As on this site would, of course, be excellent, if I had a bit more experience. For instance, there are several answers demonstrating explicit wait, but most of them were aimed at solving the OP's problem, and hence they included only the relevant parts of code. It was tough for me to understand them.
I want to solve this problem (logging into the site), but I also want to learn working with selenium properly. I haven't worked with it earlier in any other languages such as Java. The official documentation is good, but I couldn't solve this problem using that. So I want a more beginner-friendly tutorial.
This worked for me:
# Force the element to be displayed (noticed style.display = "none")
# Yes, I know you can see it, but selenium thinks it's not displayed.
driver.execute_script('document.getElementsByName("txt_username")[0].style.display="block"')
elem_username.send_keys('your name')
So you've outlined everything well and you seem to have a good understanding of it. The trick is to click the second input first, then send keys to the first input since it is then focused. (I did find that clicking the containing td also worked for Chrome, but browsers are different in that aspect and the intent of this page is that you click on the second input). A simple solution is as follows:
real, readonly = driver.find_elements_by_css_selector("input[onfocus*='SetEnd']")
readonly.click()
real.send_keys('hi')
If you have any questions about that, I can try to help.
When I use AJAX for part of my page, such as a commentbox, in the reloaded box no JavaScript works. e.g. like cutetime or whatever. So I guess I have to reload the cutetime command (in every reload of the commentbox)
It works, but I think I have the cutetime command twice. If I have a confirm box or anything other, I get the confirm box or the add command twice.
I'll try to describe it in one sentence:
I need a way to get JavaScript working in a reloaded AJAX-Box.
P.S.: I think there is a very easy way because everybody uses it :)
If you replace an element anything attached to it is lost.
When using jQuery, you can avoid this issue by using live events. However, this doesn't work for plugins where you don't attach events. In that case you need to call whatever function enables something on your element again when replacing it.