mozilla / geckodriver

WebDriver for Firefox
https://firefox-source-docs.mozilla.org/testing/geckodriver/
Mozilla Public License 2.0
7.03k stars 1.51k forks source link

Execute_(async_)script JS input not available in debugger/sources tab. #2162

Open chrisdt1998 opened 4 months ago

chrisdt1998 commented 4 months ago

I am using the selenium webdriver for Firefox for a project and I noticed that when I use execute_script, and I have a debugger statement in the JavaScript code that I pass through to it, the breakpoint is never 'activated', meaning the code never pauses at the debugger statement. This made me notice that the JS code is not available in the debugger/sources tab which I think is the source of the issue.

Note that I also tried this in chrome and it works as expected: The code pauses at the debugger statement (you need to have the terminal open) and then the JS code that you passed through execute_script is available in the debugger/sources tab.

It would be really useful to have the both the code available in the debugger sources tab and for the breakpoints to work. Another advantage of this is that we can see exactly where in the JS code an error is if one occurs. Please let me know if you'd like me to provide screenshots of how it works in Chrome.

System

Steps to reproduce:

Run the following code, the browser should pause at the breakpoint but you will notice that it doesn't.

from selenium import webdriver
import time
driver = webdriver.Firefox()
time.sleep(5)
driver.get('https://www.plex.tv/')
driver.execute_script('console.log("Hello, World!"); debugger; console.log("Hello, World! AGAIN!");')
chrisdt1998 commented 4 months ago

I also made sure to try and find if this issue was discussed anywhere before and to find reasons as to why it doesn't currently work. If this has been discussed before, please feel free to comment the link :)

whimboo commented 4 months ago

Thank you for the report. This is most likely related to https://bugzilla.mozilla.org/show_bug.cgi?id=1855013.

Note that when you are using WebDriver BiDi this example will work.

chrisdt1998 commented 4 months ago

Thank you for your answer. I didn't know about BiDi until your comment. After spending some hours playing with BiDi, I have not managed to get the breakpoints to work. With the limited examples on https://www.selenium.dev/documentation/webdriver/bidirectional/ and https://github.com/SeleniumHQ/selenium/issues/11244, this is what I came up with.

from selenium import webdriver
from selenium.webdriver.firefox.options import Options as FirefoxOptions
from selenium.webdriver.common.log import Log
from selenium.webdriver.common.bidi.console import Console

import trio

url = "https://www.plex.tv/"

firefox_options = FirefoxOptions()
firefox_options.add_argument('-devtools')
driver = webdriver.Firefox(options=firefox_options)
driver.get(url)

async def main():
    async with driver.bidi_connection() as session:
        log = Log(driver, session)

        async with log.add_listener(Console.ALL) as messages:
            driver.execute_script('console.log("Foo!"); debugger; console.log("Foo! Again!");')
        print(messages["message"])

trio.run(main,)

Could you guide me on what I should do? If I figure it out before, I will post it here for the sake of future visitors with the same problem.

whimboo commented 4 months ago

AFAIK the Python bindings do not yet support WebDriver BiDi. But you may want to check back with the Selenium folks.

To play around with WebDriver BiDi you could use our Webconsole example project at https://firefox-dev.tools/bidi-webconsole-prototype/. Just start Firefox as mentioned and open the DevTools panel, connect to it and run debugger in the console. Within the BiDi log tab you can see which commands are getting executed.