Add playwright test suite

[AR-RIFAT]

No description provided.

[utas-raymondng]

Please consider how to make it run locally, include dependency installation etc, if it runs from docker, please also explain how it works in the README.md file thanks.

[utas-raymondng]

One question, how can the dev run all these test locally before push? I believe you need to start the server and then run these test in console mode.

However can it be more automated so that you can run yarn playright and have everything run automatically include start the docker locally, then you can use the same in the github action. So you know it works locally, then github works rather then have something diff and you need to debug from two places

[utas-raymondng]

If you can add a README.md in the playright folder to tell other how to invoke the run locally will be great, thanks

[utas-raymondng]

@AR-RIFAT

Could not load conda plugin anaconda-cloud-auth:

cannot import name 'ChannelAuthBase' from 'conda.plugins.types' (/home/raymond/anaconda3/lib/python3.9/site-packages/conda/plugins/types.py)
WARNING conda.plugins.manager:load_entrypoints(85): Could not load conda plugin anaconda-cloud-auth:

cannot import name 'ChannelAuthBase' from 'conda.plugins.types' (/home/raymond/anaconda3/lib/python3.9/site-packages/conda/plugins/types.py)
Retrieving notices: ...working... done

I have anacronda installed not sure if that causing issue?

[utas-raymondng]

Remove Playright:build:web and test
Move docker compose to playwright folder
Possible to have playwright clean before build to free space?
Build should be run to avoid dev forgot to run and debug with old version.
.vscode debug profile
next time demo on local PR run
how to interact with the map

https://portal.edge.aodn.org.au/

[AR-RIFAT]

@AR-RIFAT

Could not load conda plugin anaconda-cloud-auth:

cannot import name 'ChannelAuthBase' from 'conda.plugins.types' (/home/raymond/anaconda3/lib/python3.9/site-packages/conda/plugins/types.py) WARNING conda.plugins.manager:load_entrypoints(85): Could not load conda plugin anaconda-cloud-auth:

cannot import name 'ChannelAuthBase' from 'conda.plugins.types' (/home/raymond/anaconda3/lib/python3.9/site-packages/conda/plugins/types.py) Retrieving notices: ...working... done

I have anacronda installed not sure if that causing issue?

@utas-raymondng
Yes. It seems an anaconda related issue. You may check this suggestion to solve it.

[utas-raymondng]

I need to run --> npx playwright install-deps to include the missing lib, can you add it to readme?

Also I need to run the yarn dev to start to server before I can run the pytest --headed, that means I am not using the mock server?

[AR-RIFAT]

I need to run --> npx playwright install-deps to include the missing lib, can you add it to readme?

I'll add that. Thanks

Also I need to run the yarn dev to start to server before I can run the pytest --headed, that means I am not using the mock server?

The API's are mocked. So, the web server & playwright tests run separately and the API calls are captured by playwright and then it provide mocked responses according to the request (instead of making the actual API request).

[AR-RIFAT]

@utas-raymondng

1. How to get react map object reference from browser dev-tools console
2. Introduce yarn test with testMode:true (for map instance)

@AR-RIFAT

1. Refactor map tests
2. Test map functionality: Australian marine parks boundary
3. Add tests for dataset detail page

[utas-raymondng]

I make the following change and merge the main to your branch as pretty outdated

if (import.meta.env.MODE === "dev") {
(
window as Window &
typeof globalThis & {
MAP_CONTEXT: React.Context<Partial>;
}
).MAP_CONTEXT = MapContext;
}

added to MapContext

so can you try if you can get the reference back using window.MAP_CONTEXT ?, you should get a context of type
type MapContextType = {
map: Map | null;
};

and if you can update the branch with your local change will be good

[utas-raymondng]

After some more research, I think there is no way to interact with the React in e2e testing, you can however do it with the component testing

https://playwright.dev/docs/test-components

I created another PR from your branch so to make the item a bit easier to manage by introduce a <TestHelper/> so you we can insert more to the testProps if needed in the future.

https://github.com/aodn/aodn-portal-v2/tree/testing/78-react-map-context

[AR-RIFAT]

@utas-raymondng Component testing cannot be used in python playwright and it will not be available for the python version of playwright (see here). I have to use JS/TS to build the test framework, if I want to use component testing