Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug]: Invalid flags supplied to RegExp constructor ' >> nth=3' when generating locator with PWDEBUG=console #30499

Open
RunOrVeith opened this issue Apr 24, 2024 · 0 comments
Assignees
Labels

Comments

@RunOrVeith
Copy link

RunOrVeith commented Apr 24, 2024

Version

1.43.1

Steps to reproduce

I have a copy of the HTML that causes the issue attached here: errored.html.txt

  1. Put it in a folder and remove the .txt extension, this is just so github will let me upload it.
  2. Put this test in a file next to the errored.html
  3. Then run the test with PWDEBUG=console npx playwright test. PWDEBUG is required here to trigger the bug.

Here is also a complete zip folder with all contents that you can just extract and run: reproduceBug.zip

import { expect, test } from "@playwright/test";
import fs from "fs";

test.describe("reproduce bug", () => {
  test.only("it can generate a locator for the div", async ({ page }) => {
    const htmlContent = fs.readFileSync("./errored.html");

    await page.route(/.*anything.*/, (route) =>
      route.fulfill({ body: htmlContent })
    );
    await page.goto("https://anything.com");

    await page.evaluate(() => {
      const element = document.querySelector(
        ".block > div:nth-child(1) > div:nth-child(2) > div:nth-child(2) > div:nth-child(2) > div:nth-child(1) > div:nth-child(2) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1)"
      );
      if (!element) {
        throw new Error("element not found");
      }
      const locator = playwright.generateLocator(element);

      expect(typeof locator).toMatch("string");
    });
  });
});

The element I am trying to generate a Locator for is this:

<div class="group relative flex w-auto border-y-2 border-silver-100 border-b-transparent bg-white transition-all ease-out hover:cursor-pointer hover:bg-silver-50">...</div>

or here highlighted in the chrome debug tools:
image

Expected behavior

I expect the test to pass and a locator to be generated

Actual behavior

An error is thrown by playwright.generateLocator:

 Error: page.evaluate: SyntaxError: Invalid flags supplied to RegExp constructor ' >> nth=3'

        at new RegExp (<anonymous>)
        at createTextMatcher (<anonymous>:5935:16)
        at Object.queryAll (<anonymous>:5004:29)
        at InjectedScript._queryEngineAll (<anonymous>:4949:49)
        at InjectedScript.querySelectorAll (<anonymous>:4936:30)
        at generateSelector (<anonymous>:3649:32)
        at InjectedScript.generateSelectorSimple (<anonymous>:4872:12)
        at ConsoleAPI._generateLocator (eval at extend (:5100:40), <anonymous>:2241:43)
        at Object.generateLocator (eval at extend (:5100:40), <anonymous>:2205:52)
        at eval (eval at evaluate (:226:30), <anonymous>:6:34)
        at createTextMatcher (/home/veith/projects/automagically/ts/apps/next-automagically/playwrightTests/reproduceBug/<anonymous>:5935:16)
        at Object.queryAll (/home/veith/projects/automagically/ts/apps/next-automagically/playwrightTests/reproduceBug/<anonymous>:5004:29)
        at InjectedScript._queryEngineAll (/home/veith/projects/automagically/ts/apps/next-automagically/playwrightTests/reproduceBug/<anonymous>:4949:49)
        at InjectedScript.querySelectorAll (/home/veith/projects/automagically/ts/apps/next-automagically/playwrightTests/reproduceBug/<anonymous>:4936:30)
        at generateSelector (/home/veith/projects/automagically/ts/apps/next-automagically/playwrightTests/reproduceBug/<anonymous>:3649:32)
        at InjectedScript.generateSelectorSimple (/home/veith/projects/automagically/ts/apps/next-automagically/playwrightTests/reproduceBug/<anonymous>:4872:12)
        at ConsoleAPI._generateLocator (/home/veith/projects/automagically/ts/apps/next-automagically/playwrightTests/reproduceBug/eval at extend (:5100:40), <anonymous>:2241:43)
        at Object.generateLocator (/home/veith/projects/automagically/ts/apps/next-automagically/playwrightTests/reproduceBug/eval at extend (:5100:40), <anonymous>:2205:52)
        at eval (/home/veith/projects/automagically/ts/apps/next-automagically/playwrightTests/reproduceBug/eval at evaluate (:226:30), <anonymous>:6:34)
        at /home/veith/projects/automagically/ts/apps/next-automagically/playwrightTests/reproduceBug/reproduce.spec.ts:13:16

Possibly related: #26974

Additional context

Using the playwright recorder, I can not select this element, it just doesn't appear when hovering over the corresponding area.

Environment

System:
    OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 9.78 GB / 15.31 GB
    Container: Yes
  Binaries:
    Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node
    npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm
    pnpm: 8.15.5 - ~/.local/share/pnpm/pnpm
  IDEs:
    VSCode: 1.88.1 - /snap/bin/code
  Languages:
    Bash: 5.1.16 - /usr/bin/bash
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants