Playwright config and Wallet Connection Test

[SudoPumpkin]

Description

Playwright has been installed in this PR with 2 tests.
One test confirms navigation to the Fractal app via http://localhost:3000.
The second test navigates to http://localhost:3000, confirms local wallet is present, and connects to the wallet.

A GitHub Actions yml has not been included as of yet.

Notes

The user will need to run a local version of hardhat(blockchain node), start the fractal-interface app, then run the playwright tests.

Issue (if applicable)

Testing

1. Clone repo
2. Open a terminal(A)
3. Install dependencies: npm i npx playwright install
4. Add a .env.local file to the root of the project with the following information:
   Comment these out when not trying to run these tests

REACT_APP_LOCAL_CHAIN_ID="31337"
REACT_APP_LOCAL_PROVIDER_URL="http://127.0.0.1:8545"

5. Open another terminal(B)
6. Start local hardhat node: npx hardhat node
7. Open a third terminal(C)
8. Start fractal-interface app: npm start
9. Run Playwright tests: npx playwright test in terminal 'A'
10. (2) Tests should run and pass

To test individual tests use the following:

• npx playwright test tests/nameOfTest

Example:
npx playwright test tests/ConfirmWalletConnect.spec.ts

To view the tests in a browser(Headful) append the following to your command line:

• --headed

Example:
npx playwright test tests/ConfirmWalletConnect.spec.ts --headed

To use particular browser types append the following to your command line:

• --project=browserName

Example:
npx playwright test tests/ConfirmWalletConnect.spec.ts --headed --project=chromium

Screenshots (if applicable)

[netlify]

✅ Deploy Preview for fractal-framework-interface-dev ready!

Name	Link
🔨 Latest commit	94aa257
🔍 Latest deploy log	https://app.netlify.com/sites/fractal-framework-interface-dev/deploys/632b67eca288710009537d58
😎 Deploy Preview	https://deploy-preview-507--fractal-framework-interface-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[Da-Colon]

Looking good. 2 notes and 2 changes

[Da-Colon]

👍

[herbig]

Hey @SudoPumpkin ! This is looking great!

First thing I encountered, the tests failed because the browsers weren't installed. I was able to fix this with npx playwright install between steps 3/4, though it seems like npm i should have covered this? I'm not really sure.

After that, I was able to get the first three tests to pass, NavigateToFractal, but ConfirmWalletConnect tests fail, and it seems like it gets hung up on the wallet connect QR:

84cc575de84edeb083587000e254b8f1f8720e57.webm

Could @Da-Colon or @mudrila try running this locally as well (using the Testing steps above), and see if you encounter the same issues?

[Da-Colon]

@herbig Are you running a local hardhat node when running the tests?

There is one step here that is missing.

Adding to .env.local

REACT_APP_LOCAL_CHAIN_ID="31337"
REACT_APP_LOCAL_PROVIDER_URL="http://127.0.0.1:8545"

I would comment these out when not trying to run these tests but these are needed currently for the tests to run

[Da-Colon]

@herbig

In the future this will all run in a dockerized container and there will be no need to set these here

[herbig]

.env.local

dammit, cool will do that.

Yeah I realize this will be dockerized, just wanted to make sure it's working locally just as a spot check

[herbig]

@herbig Are you running a local hardhat node when running the tests?

There is one step here that is missing.

Adding to .env.local

REACT_APP_LOCAL_CHAIN_ID="31337"
REACT_APP_LOCAL_PROVIDER_URL="http://127.0.0.1:8545"

I would comment these out when not trying to run these tests but these are needed currently for the tests to run

@Da-Colon I added these to .env.local and that test still fails.

Is it working locally for you?

[herbig]

Got it working and tests passed!

[adamgall]

I was able to fix this with npx playwright install between steps 3/4, though it seems like npm i should have covered this? I'm not really sure.

@herbig I ran into the same thing. I see that @SudoPumpkin added this step into the instructions in this PR, but I agree that running npx playwright install after doing a basic npm install seems weird. I was able to "fix" this by adding playwright to the package.json file as an additional devDependency.

[Da-Colon]

o weird I didn't have to do npx playwright install just a normal npm install