wasm-bingen-test-runner is very slow for me, is there anything I can do to speed it up?

[andrew-chang-dewitt]

When I execute tests marked with the #[wasm-bingen-test] directive, the test runner always takes forever on the step where the output reads "starting new webdriver session". Is there something I can do to make this faster, or am I doing something wrong? Currently, running one trivial test on one trivial component takes over 4 minutes to execute for me. I'm executing the test with cargo test --target=wasm32-unknown-unknown (although I've tried wasm-pack test --headless --chrome too, with the same results).

I'm trying to unit test a component library I'm building for use in a leptos project. The full project repo is here on GitHub, but if needed I can try to reduce the problem to a minimally reproducible test case & post that instead. I've included relevant excerpts of the component being tested, the test I'm trying to run, & relevant config files below too.

I'm running this on WSL in Windows 11 with rustc 1.68.0-nightly, cargo 1.68.0-nightly, wasm-pack 0.10.3, Google Chrome 108.0.5359.124, & ChromeDriver 108.0.5359.71.

FWIW The test also fails when it does finally run, even though the form element is created as expected when I run the leptos dev server, but that's likely an unrelated problem.

wasm-pack test output

andrew@LAZARUS: ~/dev/hoops-app
$ time wasm-pack test --headless --chrome
[INFO]: Checking for the Wasm target...
    Finished dev [unoptimized + debuginfo] target(s) in 0.17s
    Finished test [unoptimized + debuginfo] target(s) in 0.17s
     Running unittests src/lib.rs (target/wasm32-unknown-unknown/debug/deps/hoops_app-b6e4ee6640b7d5d6.wasm)
Set timeout to 20 seconds...
Running headless tests in Chrome on `http://127.0.0.1:35743/`
Try find `webdriver.json` for configure browser's capabilities:
Not found
/// **Note:** It hangs here for almost the entire time, saying "starting new webdriver session" 
///   before changing to "running 1 test" and continuing
running 1 test                                    

test hoops_app::components::form::tests::it_renders_a_form_element_with_default_attributes ... FAIL

failures:

---- hoops_app::components::form::tests::it_renders_a_form_element_with_default_attributes output ----
    error output:
        panicked at 'assertion failed: `(left != right)`
          left: `None`,
         right: `None`', src/components/form.rs:40:9
        
        Stack:
        
        Error
            at http://127.0.0.1:44311/wasm-bindgen-test:567:17
            at logError (http://127.0.0.1:44311/wasm-bindgen-test:220:18)
            at imports.wbg.__wbg_new_abda76e883ba8a5f (http://127.0.0.1:44311/wasm-bindgen-test:566:62)
            at console_error_panic_hook::Error::new::h5febe5de68027b65 (http://127.0.0.1:44311/wasm-bindgen-test_bg.wasm:wasm-function[1512]:0x8094c)
            at console_error_panic_hook::hook_impl::h02dafa8ce1efe660 (http://127.0.0.1:44311/wasm-bindgen-test_bg.wasm:wasm-function[319]:0x4e7e4)
            at console_error_panic_hook::hook::hdf23d46acf912eb0 (http://127.0.0.1:44311/wasm-bindgen-test_bg.wasm:wasm-function[1650]:0x827b9)
            at core::ops::function::Fn::call::h19e847950aa04578 (http://127.0.0.1:44311/wasm-bindgen-test_bg.wasm:wasm-function[1453]:0x7fa4e)
            at std::panicking::rust_panic_with_hook::h36bd4e00c2588096 (http://127.0.0.1:44311/wasm-bindgen-test_bg.wasm:wasm-function[705]:0x6969d)
            at std::panicking::begin_panic_handler::{{closure}}::hb2f881830cf8f7f7 (http://127.0.0.1:44311/wasm-bindgen-test_bg.wasm:wasm-function[866]:0x70db6)
            at std::sys_common::backtrace::__rust_end_short_backtrace::h17b2e1996efd4b9d (http://127.0.0.1:44311/wasm-bindgen-test_bg.wasm:wasm-function[1740]:0x839e2)
        
        
    
    JS exception that was thrown:
        RuntimeError: unreachable
            at __rust_start_panic (http://127.0.0.1:44311/wasm-bindgen-test_bg.wasm:wasm-function[2052]:0x856a1)
            at rust_panic (http://127.0.0.1:44311/wasm-bindgen-test_bg.wasm:wasm-function[1781]:0x840c1)
            at std::panicking::rust_panic_with_hook::h36bd4e00c2588096 (http://127.0.0.1:44311/wasm-bindgen-test_bg.wasm:wasm-function[705]:0x696c8)
            at std::panicking::begin_panic_handler::{{closure}}::hb2f881830cf8f7f7 (http://127.0.0.1:44311/wasm-bindgen-test_bg.wasm:wasm-function[866]:0x70db6)
            at std::sys_common::backtrace::__rust_end_short_backtrace::h17b2e1996efd4b9d (http://127.0.0.1:44311/wasm-bindgen-test_bg.wasm:wasm-function[1740]:0x839e2)
            at rust_begin_unwind (http://127.0.0.1:44311/wasm-bindgen-test_bg.wasm:wasm-function[1266]:0x7c2a0)
            at core::panicking::panic_fmt::h1393920bf84890e4 (http://127.0.0.1:44311/wasm-bindgen-test_bg.wasm:wasm-function[1608]:0x81f20)
            at core::panicking::assert_failed_inner::h3b12a5217c2c750d (http://127.0.0.1:44311/wasm-bindgen-test_bg.wasm:wasm-function[272]:0x49820)
            at core::panicking::assert_failed::h5207eda19f25b411 (http://127.0.0.1:44311/wasm-bindgen-test_bg.wasm:wasm-function[639]:0x65d74)
            at hoops_app::components::form::tests::it_renders_a_form_element_with_default_attributes::h6aad9150a1a47432 (http://127.0.0.1:44311/wasm-bindgen-test_bg.wasm:wasm-function[177]:0x3c4dd)

failures:

    hoops_app::components::form::tests::it_renders_a_form_element_with_default_attributes

test result: FAILED. 0 passed; 1 failed; 0 ignored
console.log div contained:
    panicked at 'assertion failed: `(left != right)`
      left: `None`,
     right: `None`', src/components/form.rs:40:9
    
    Stack:
    
    Error
        at http://127.0.0.1:44311/wasm-bindgen-test:567:17
        at logError (http://127.0.0.1:44311/wasm-bindgen-test:220:18)
        at imports.wbg.__wbg_new_abda76e883ba8a5f (http://127.0.0.1:44311/wasm-bindgen-test:566:62)
        at console_error_panic_hook::Error::new::h5febe5de68027b65 (http://127.0.0.1:44311/wasm-bindgen-test_bg.wasm:wasm-function[1512]:0x8094c)
        at console_error_panic_hook::hook_impl::h02dafa8ce1efe660 (http://127.0.0.1:44311/wasm-bindgen-test_bg.wasm:wasm-function[319]:0x4e7e4)
        at console_error_panic_hook::hook::hdf23d46acf912eb0 (http://127.0.0.1:44311/wasm-bindgen-test_bg.wasm:wasm-function[1650]:0x827b9)
        at core::ops::function::Fn::call::h19e847950aa04578 (http://127.0.0.1:44311/wasm-bindgen-test_bg.wasm:wasm-function[1453]:0x7fa4e)
        at std::panicking::rust_panic_with_hook::h36bd4e00c2588096 (http://127.0.0.1:44311/wasm-bindgen-test_bg.wasm:wasm-function[705]:0x6969d)
        at std::panicking::begin_panic_handler::{{closure}}::hb2f881830cf8f7f7 (http://127.0.0.1:44311/wasm-bindgen-test_bg.wasm:wasm-function[866]:0x70db6)
        at std::sys_common::backtrace::__rust_end_short_backtrace::h17b2e1996efd4b9d (http://127.0.0.1:44311/wasm-bindgen-test_bg.wasm:wasm-function[1740]:0x839e2)

Error: some tests failed                          
error: test failed, to rerun pass `--lib`

Caused by:
  process didn't exit successfully: `/home/andrew/.cargo/bin/wasm-bindgen-test-runner /home/andrew/dev/hoops-app/target/wasm32-unknown-unknown/debug/deps/hoops_app-b6e4ee6640b7d5d6.wasm` (exit status: 1)
Error: Running Wasm tests with wasm-bindgen-test failed
Caused by: failed to execute `cargo test`: exited with exit status: 1
  full command: "cargo" "test" "--target" "wasm32-unknown-unknown"

real    4m28.371s
user    0m0.958s
sys     0m0.524s

./src/components/form.rs

// the component being tested

use leptos::typed_builder::*;
use leptos::{view, IntoView, Scope};

/// Properties that can be passed to the [Input] component.
#[derive(TypedBuilder)]
pub struct FormProps {}

#[allow(non_snake_case)]
pub fn Form(cx: Scope, _props: FormProps) -> impl IntoView {
    view! {
        cx,
        <form></form>
    }
}

// ...

// the test module

#[cfg(test)]
mod tests {
    use leptos::mount_to_body;
    use wasm_bindgen_test::*;

    wasm_bindgen_test_configure!(run_in_browser);

    use super::*;

    #[wasm_bindgen_test]
    pub fn it_renders_a_form_element_with_default_attributes() {
        mount_to_body(move |cx| {
            view! {
                cx,
                <Form>
                </Form>
            }
        });

        let document = leptos::document();
        let form = document.query_selector("form").unwrap();
        assert_ne!(form, None);
    }
}

./cargo/config

[target.wasm32-unknown-unknown]
runner = 'wasm-bindgen-test-runner'

./Cargo.toml

[package]
name = "hoops_app"
version = "0.0.1"
edition = "2021"

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
actix-files = { version = "0.6", optional = true }
actix-web = { version = "4", optional = true, features = ["openssl", "macros"] }
console_error_panic_hook = "0.1"
console_log = "0.2"
cfg-if = "1"
leptos = { git = "https://github.com/gbj/leptos", default-features = false, features = [
  "serde",
] }
leptos_meta = { git = "https://github.com/gbj/leptos", default-features = false }
leptos_actix = { git = "https://github.com/gbj/leptos", default-features = false, optional = true }
leptos_router = { git = "https://github.com/gbj/leptos", default-features = false }
log = "0.4"
simple_logger = "4"
wasm-bindgen = "0.2"
web-sys = { version = "0.3", features = ["AbortController", "AbortSignal"] }

[dev-dependencies]
wasm-bindgen-test = "0.3.33"

[features]
hydrate = ["leptos/hydrate", "leptos_meta/hydrate", "leptos_router/hydrate"]
ssr = [
  "dep:actix-files",
  "dep:actix-web",
  "dep:leptos_actix",
  "leptos/ssr",
  "leptos_meta/ssr",
  "leptos_router/ssr",
]

[package.metadata.leptos]
# The name used by wasm-bindgen/cargo-leptos for the JS/WASM bundle. Defaults to the crate name
output-name = "leptos_start"
# The site root folder is where cargo-leptos generate all output. WARNING: all content of this folder will be erased on a rebuild. Use it in your server setup.
site-root = "target/site"
# The site-root relative folder where all compiled output (JS, WASM and CSS) is written
# Defaults to pkg
site-pkg-dir = "pkg"
# [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to <site-root>/<site-pkg>/app.css
style-file = "style/main.scss"
# [Optional] Files in the asset-dir will be copied to the site-root directory
# assets-dir = "static/assets"
# The IP and port (ex: 127.0.0.1:3000) where the server serves the content. Use it in your server setup.
site-address = "0.0.0.0:3000"
# The port to use for automatic reload monitoring
reload-port = 3001
# [Optional] Command to use when running end2end tests. It will run in the end2end dir.
end2end-cmd = "npx playwright test"
#  The browserlist query used for optimizing the CSS.
browserquery = "defaults"
# Set by cargo-leptos watch when building with tha tool. Controls whether autoreload JS will be included in the head
watch = false
# The environment Leptos will run in, usually either "DEV" or "PROD"
env = "DEV"
# The features to use when compiling the bin target
#
# Optional. Can be over-ridden with the command line parameter --bin-features
bin-features = ["ssr"]

# If the --no-default-features flag should be used when compiling the bin target
#
# Optional. Defaults to false.
bin-default-features = false

# The features to use when compiling the lib target
#
# Optional. Can be over-ridden with the command line parameter --lib-features
lib-features = ["hydrate"]

# If the --no-default-features flag should be used when compiling the lib target
#
# Optional. Defaults to false.
lib-default-features = false

[andrew-chang-dewitt]

Y'all I finally figured this one out after coming back to it yesterday and digging around in headless chrome & chromedriver settings more. Looks like there's a known issue with chrome & gpu usage, so the --disable-gpu flag needs set in headless chrome to prevent errors that take forever to handle before moving on. For this case, I did it by setting the option in webdriver.json at my project root, like this:

{
  "goog:chromeOptions": {
    "args": [
      "--disable-gpu"
    ]
  }
}