Skip to content

vitest userEvent interactivity api cannot interact with SVGs in browser mode #6032

@kwojcik

Description

@kwojcik

Describe the bug

The locator from screen.getByTestID(...) for SVGs does not work with vitest's userEvent for SVGs, the xpath that userEvent tries to use is wrong. This is preventing me from testing tooltips that trigger from svg icons. It works fine with testing-library's userEvent.

This is what it tries to find. This xpath doesn't work in the chrome devtools either `$x('HTML/BODY[1]/DIV[1]/svg[1]').

waiting for frameLocator('[data-vitest="true"]').locator('xpath=HTML/BODY[1]/DIV[1]/svg[1]')

Maybe it should be this?

HTML/BODY[1]/DIV[1]/*[local-name()='svg']

Reproduction

https://github.com/kwojcik/vitestsourcemapbug/tree/svgUserEvent

git checkout svgUserEvent
npm install
npm test

System Info

System:
    OS: macOS 13.6.7
    CPU: (12) arm64 Apple M2 Max
    Memory: 2.45 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.2 - ~/.asdf/installs/nodejs/18.18.2/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 9.8.1 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 9.4.0 - /opt/homebrew/bin/pnpm
    Watchman: 2024.04.01.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 16.6
  npmPackages:
    @vitest/browser: v2.0.0-beta.12 => 2.0.0-beta.12 
    @vitest/ui: v2.0.0-beta.12 => 2.0.0-beta.12 
    vite: 5.3.3 => 5.3.3 
    vitest: v2.0.0-beta.12 => 2.0.0-beta.12

Used Package Manager

npm

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    feat: browserIssues and PRs related to the browser runnerp3-minor-bugAn edge case that only affects very specific usage (priority)

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions