Implementing e2e tests

[UO269509]

We are going to start implementing the e2e test.

[UO225811]

Good afternoon @pglez82. We are having some problems to run the e2e tests locally and we don't understand the reason why it doesn't execute well.

This is the error that appears:

[pglez82]

BROWSER=none sets an environment variable to indicate npm that it shouldn't launch the browser. This works on linux (and inside docker, that is linux as well), but not on windows. To set a variable on windows is set BROWSER=none. This will break the docker image though. I recommend creating and env file for solving it. More information here: https://github.com/facebook/create-react-app/issues/3070#issuecomment-449810144

[UO269509]

Sorry for the delay in replying to your message @pglez82 because I didn`t have time to try it. I create the env file with "BROWSER=none" inside of it but it still shows the same error, there is another approach to solve it?

[UO269509]

I also try to put it directly in the package.json as it is said in the comment you give us.

[pglez82]

If you created an env file to prevent the browser from launching you need to remove the BROWSER=none in the global-setup.js. If you do not remove this, it will show the same error as windows do not recognize this command.

[UO269509]

Yes, know it is working, thank you so much.

[UO225811]

Hello @pglez82 When trying to do tests, I can't get the element I want, I don't know what I am doing wrong exactly.

In this text I just try to get the link to click on it and go to another page:

And I get an error of a not found element:

The element can be seen here, but I don't know why it doesn't traverse well and find that element.

[UO225811]

Good afternoon @pglez82. Do we have to do e2e tests for just testing at localhost?

[pglez82]

Good afternoon @pglez82. Do we have to do e2e tests for just testing at localhost?

e2e tests should run locally and also they should run in the CI process. The idea is only deploy if these tests pass.

Have you solved the previous error?

[UO225811]

Good afternoon @pglez82,

I still have some errors telling me that "Node is either not visible or not an HTMLElement" when trying to get some elements such as the login field text when trying to fill it with the user name.

• [ ]

[UO269509]

Yes, the problem is that we cannot login properly with the test, so we are stack testing the login and we cannot do other tests because the login is the fundamental part of all the tests.

[pglez82]

But isn't the login performed in a different window? In that case you can not expect the page to have the element, but the pop up window where you do the login.

If this is the case, maybe this is useful:

https://stackoverflow.com/questions/46669788/how-to-handle-popups-in-puppeteer

Maybe also this, even though, I never used it: https://www.npmjs.com/package/expect-puppeteer#toDisplayDialog

[UO225811]

The problem is that we don't have a popup anymore, we go straightforward into the same login as the popup but changing in that same tab instead, going back to radarin once the user is logged in.

But the thing is that it is giving me errors at localhost:3000 when I'm just trying to fill a single input telling that it doesn't exist, when at the same time inspecting at the page it can be seen that this input already exists.

[pglez82]

If you can upload a minimal example of this (maybe in a branch of your project), that could be helpful to identify and isolate the error. Also trying to check the differences between your code and the example provided under the e2e folder could help.

[UO225811]

I'm trying to solve the problem here: https://github.com/Arquisoft/radarin_en3a/blob/Teste2e/webapp/e2e/steps/login-form.steps.js

These are the differences compared with the example from the e2e folder:

I was wondering if maybe because I'm changing from localhost to the login at solidcommunity and then back I had to manually change the "page " parameter, or if it automatically changes with the goto function.

[UO225811]

Good afternoon @pglez82, we still have problems in the Teste2e branch (https://github.com/Arquisoft/radarin_en3a/blob/Teste2e/webapp/e2e/steps/login-form.steps.js) and the button doesn't work even trying things with xpath.

We've been trying to make the input work, and thanks to @UO269509 we could put it with just an eval (the other options didn't work).

But the problem persists in the "Log in" button.

We also tried with promises and all the commented things above the line 37.

We find ourselves a bit desperate.

[pglez82]

Ok. It took a while but I got it working. There are two main problems:

1) Screen size. When you render the page it is two small and the layout hides out the button. I just made it bigger in the custom-enviroment file args: ['--window-size=1400,900'] but this is not enough, as the viewport doesn't grow. I had to add also await page.setViewport({ width: 1400, height: 900 }) at the beginning of the test. With this at least, the page is rendered properly.

2) E2E tests is all about timeouts. The problem that you have is that the default timeout (500ms) is too low. I added in the beforeEach this line setDefaultOptions({ timeout: 10000 }), increasing the sime out. You need to import this function: const {setDefaultOptions}=require('expect-puppeteer'). After this everything starts to work smothly. My test looks like this now:

await page.setViewport({ width: 1400, height: 900 })                 
await expect(page).toMatch('RADARIN')
await expect(page).toFill('input[name="userName"]', username);
await expect(page).toClick('button', {text: 'Log in'});

It opens the page, writes in the input and clicks the button. Let me know if that helps. At least in my computer runs flawlessly. I could have done a PR but maybe that was too much :).

[UO225811]

I tried your approach and now my login test is working as nice as yours. Thank you so much!

[UO225811]

e2e tests are now working.