Problems debugging the browser mode with playwright

[matheus-hatzlhoffer]

I have a custom HTML Element that in the connectedCallback() function get some data to render the component. The function "getData()" first checks the local storage for the data, if the data is there it set the "data" attribute and the component is rendered. On the other case, the component does a rest request to an API.

My custom class:

export class CustomDataElement extends HTMLElement{
    constructor() {
        super();
        this.dataMap = null;
    }

    static get observedAttributes() {
        return ["data"];
    }

    connectedCallback() {
        this.getData();
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (name === "data") {
            this.dataMap = newValue;
            this.renderComponent();
        }
    }

    async getData() {
        const storedData = localStorage.getItem("data");

        if (storedData !== null) {
            this.setAttribute("data", storedData);
        } else {
            window.fetch("api/data").then((response) => {
                if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status}`);
                }
                return response.json()
            }).then((data) => {
                const dataMap = JSON.stringify(data)
                this.setAttribute("data", dataMap)
                localStorage.setItem("data", dataMap);
            }).catch(error => {
                console.error('Error fetching data:', error);
            });
        }
    }
}
customElements.define('custom-data', CustomDataElement);

In this project I am using browser mode with playwright as provider.
I wrote a test that sets the local storage key and checks after rendering the component if the "dataMap" attribute is the same set.

My Test:

test('CustomDataElement should use data from localStorage if found', async () => {
    const expectedDataMap = JSON.stringify({ name: "Test" })

    window.localStorage.setItem(data.storageKey, expectedDataMap)

    const customDataElement = document.createElement("custom-data");
    document.appendChild(customDataElement);

    expect(customDataElement.dataMap).toEqual(expectedDataMap);
})

But this test is failing saying:

TypeError: Cannot read properties of undefined (reading 'node')

I think this is related with expect(customDataElement.dataMap).toEqual(expectedDataMap); but the error is very generic

I tried following the browser mode debugging
But a error happens:

launch.json:

{
    "version": "0.2.0",
    "configurations": [
      {
        "type": "node",
        "request": "launch",
        "name": "Run Vitest Browser",
        "program": "${workspaceRoot}/node_modules/vitest/vitest.mjs",
        "console": "integratedTerminal",
        "args": ["--inspect-brk", "--browser", "--no-file-parallelism"]
      },
      {
        "type": "chrome",
        "request": "attach",
        "name": "Attach to Vitest Browser",
        "port": 9229
      }
    ],
    "compounds": [
      {
        "name": "Debug Vitest Browser",
        "configurations": ["Attach to Vitest Browser", "Run Vitest Browser"],
        "stopAll": true
      }
    ]
  }

"vitest": "^2.0.5"
"playwright": "^1.47.0"
"vite": "^5.3.4"
"@vitest/browser": "^2.0.5"

[sheremet-va]

Do you import from playwright directly in your browser tests? Why is it in your .vite/deps?

[matheus-hatzlhoffer]

Sorry I didn't understand your question. How can I check my .vite/deps? I have imported nothing from playwright in my test file. Playwright is just the provider of the browser mode

[matheus-hatzlhoffer]

This is my test configuration:

test: {
        setupFiles: ['./iscSetupFile.js'],
        exclude: [
            ...configDefaults.exclude,
            '**/public/**',
        ],
        coverage: {
            provider: 'istanbul',
            reporter: ['html', 'lcov', 'text'],
            reportsDirectory: '../build/coverage',
            exclude: [
                '**/public/**', ...coverageConfigDefaults.exclude
            ]
        },
        browser: {
            provider: 'playwright',
            enabled: true,
            name: 'chromium',
            headless: true,
            screenshotDirectory: '../build/screenshots',
            screenshotFailures: false,
            providerOptions: {
                launch: {
                    devtools: true,
                },
            }
        },
    },

I tried deleting the node_modules and installing again. I tried re-installing vitest browser and playwright with npx vitest init browser

[matheus-hatzlhoffer]

Yes I imported playwright directly in my test, that was the problem hahaha

[matheus-hatzlhoffer]

Thanks for the help!

[matheus-hatzlhoffer]

I checked here and the error happens in this function

var require_playwright_core = __commonJS({
  "node_modules/playwright-core/index.js"(exports, module) {
    var minimumMajorNodeVersion = 14;
    var currentNodeVersion = process.versions.node;
    var semver = currentNodeVersion.split(".");
    var [major] = [+semver[0]];
    if (major < minimumMajorNodeVersion) {
      console.error(
        "You are running Node.js " + currentNodeVersion + `.
Playwright requires Node.js ${minimumMajorNodeVersion} or higher. 
Please update your version of Node.js.`
      );
      process.exit(1);
    }
    module.exports = require_inprocess();
  }
});

My code is in Javacript Vanilla, I am not using any node environment, so I don't think I have a process.versions. Can it be something related to that? Do you know what can I verify next?

[matheus-hatzlhoffer]

The problem is that I forgot to remove an import in the begging of the file.

I had an import import { chromium } from 'playwright' that I didn't remove it...