Receiving error in selenium (javascript) when opening shadowRoot

Question

I am setting up the first automated tests for a web app I'm working on, and have hit a state I don't understand.

It is a browser app, so I start a very simple static server:

    import http from 'http';

    let serve = serveStatic(path);
    server = http.createServer(function(req, res) {
        var done = finalhandler(req, res);
        serve(req, res, done);
    });

During my testing, I receive an error message HTTP method not allowed

let options = new firefox.Options();
options.headless();
let capabilities = webdriver.Capabilities.firefox().set('acceptInsecureCerts', true);
let driver = new webdriver.Builder()
    .forBrowser('firefox')
    .setFirefoxOptions(options)
    .withCapabilities(capabilities)
    .build();

await driver.get('http://127.0.0.1:3030/index.html');
let tab = await driver.findElement(state.By.css('ps-tabpanel'));
tab = await tab.getShadowRoot(); // HTTP method not allowed

On a hunch, I changed this to an HTTPS connection

import http from 'https';

In this case I receive a very different error

await driver.get('https://127.0.0.1:3030/index.html');
// Reached error page: about:neterror?e=nssFailure2&u=https%3A//127.0.0.1%3A3030/index.html&c=UTF-8&d=%20

So my main question is, what am I doing wrong to access the shadowRoot using Javascript Selenium?

For reference

• mocha + selenium + firefox
• gitpod environment
• have an earlier test that simply verifies I can connect to example.com just to prove the connection is working.

Answer 1

In an attempt to work around the error, I switched to the javascript executor. This raised a different error message (cyclical object).

This led me to a different stackoverflow question

https://stackoverflow.com/a/67223939/1961413

According to that answer, this is a known defect in the GeckoDriver/Firefox.

Based on that I switched to the ChromeDriver/Chrome, and was able to find the ShadowRoot.

https://www.npmjs.com/package/chromedriver

let driver = new webdriver.Builder()
    .forBrowser('chrome')
    .build();
await driver.get('http://127.0.0.1:3030/index.html');
let tab = await driver.findElement(state.By.css('ps-tabpanel'));
tab = await tab.getShadowRoot();