[Question] - Component Testing

[imartinflores]

Hey guys, I am facing some issues trying to run some component tests. I am following the docs (https://playwright.dev/docs/test-components#how-to-get-started) and when running the first command, I can't find any experimental module being installed, which I think is the one that needs to be used on the test file. Also, the npm run test-ct should be a script that executed "playwright test?"

I am not sure if the files mentioned in the docs should be added automatically to the project, but they are not , so I am creating them manually, after manually installing the "experimental-ct-react'" module.

Once I installed that and created both files, (.html and .js), I created my test class:

const { test, expect } = require('@playwright/experimental-ct-react');
const CookieBanner = require('../../../src/components/CookieBanner');
//import CookieBanner from '../../../src/components/CookieBanner/'

test.use({ viewport: { width: 500, height: 500 } });

test('event should work', async ({ mount }) => {
  let clicked = false;
  const component = await mount(<CookieBanner></CookieBanner>);

  await expect(component).toContainText('Submit');

  await component.click();

  expect(clicked).toBeTruthy();
});

When running playwright test, the issue is:

SyntaxError: Unexpected token '<'

The CookieBanner component is a .jsx file using export defaults.

Any help is appreciated. Thanks

[rwoll]

I am not sure if the files mentioned in the docs should be added automatically to the project, but they are not , so I am creating them manually

It should create the starter files automatically and install @playwright/experimental-ct-react automatically, so if it didn't do that, something might be broken! Sorry about that!

Can you try again and (1) paste the output here, and (2) describe where you are running the command, where your package.json is (and generally the layout of your project)?

$ npm init playwright@latest -- --ct

Thanks for your patience as we start collecting feedback from the preview!

[imartinflores]

@rwoll oh no worries at all! Yes, I'll do that and provide some feedback. Meanwhile, should I be able to install just that package with an npm install? And create the files manually ? It is because I ve already have the project in place. Thanks a lot!

[rwoll]

Meanwhile, should I be able to install just that package with an npm install?

Yes, but debugging any issues might be a bit difficult unless you can link to a repo. By going through npm init playwright@latest -- --ct, we'll have a better sense of how things are setup.

It is because I ve already have the project in place.

Did you run npm init playwright@latest -- --ct before your original comment? I assumed you had. If not, it should be safe to run this in an already created project:

For instance, I used create-react-app to generate a starter react project and then just added PW on top:

$ npx create-react-app foo
$ cd foo
$ npm init playwright@latest -- --ct

should I be able to install just that package with an npm install?

Yes, you can do npm i @playwright/experimental-ct-react, but the docs aren't complete enough to get started from just there. In a fresh directory, you can run the create-react-app and npm init playwright@latest -- --ct example to see what files are changed/added.

Regardless, can you let me know the layout of your project's file structure? Which React setup?

[imartinflores]

Right, thanks. So, installing it from scratch takes me through the same process and provides the same output than previous versions of Playwright. I can't even see the experimental module being installed. Please let me know if I can provide more or better information. The package.json there contains the scripts and I am running the command in the root folder. I also tried it at the source level and had the same results.

this is the project structure , I was wondering if Jest be causing any conflicts ? But playwright is already installed and the visual tests are running fine, so don't think so.

The files it generates in this project are just this:

[rwoll]

🤔 Thanks for the screenshots!

In the first one, I see some unexpected output:

This looks correct (with special empahasis on the @latest):

> npm init playwright@latest -- --ct

but the output below it looks wrong. If npm is actually getting the @latest version of the PW init, it should be prompting you with Which framework do you use? (experimental):

Follow up:

1. Can you run with npm's --verbose flag so we can see why npm might not be getting you the latest?:

   > npm init --verbose playwright@latest -- --ct

2. Are you in an environment that uses a proxy globally or for npm? And or do you have any custom registries that might be interfering with pulling the latest package?

Thanks!

[imartinflores]

Thanks @rwoll !. We have a local npm registry , could that be the issue ? Nothing seems to be wrong in the verbose, but I am still not seeing the message you mentioned above. I can't upload images right now, but the logs using verbose look all "Completed" and can't see nothing weird on it.

[imartinflores]

Hi @rwoll just a quick update. I've tried again on my personal laptop and it's prompting with the message you've mentioned above. So I guess when installing it on the existing project on my working laptop, it's probably trying to pull packages from cache ? is there any way to avoid that ? Thanks!

[rwoll]

We have a local npm registry

Okay—that likley explains how it's possible for you to get a stale package even when using the @latest directive.

it's probably trying to pull packages from cache?

Yes, unfortunately!

is there any way to avoid that ?

Likely yes, but I'm not sure because this is likely specific to whatever local registry you are using on the non-personal machine. Perhaps your registry has a cache bust command or can print logs to say where and when it's actually pulling new packages?

Closing for now since this does not appear to be an issue with Playwright itself.

[imartinflores]

Thanks @rwoll , appreciated!

[zandeto]

Hello, I am having the exact same issue but it looks like the registry is correct, as I don't have others, and the npm config get registry returns https://registry.npmjs.org/

I have also deleted the npm cache but it still initializes the e2e playwright not the experimental components one.

@imartinflores have you managed to find any resolution to this problem?