Modern App / Browser Page Test

Now a days, we do mostly do modern app development(client side web development) like create application with Angular or React or NodeJS etc.. And the challenging part is how we test the UI. When we do backend development like write code in C# we generally as developer we write unit test case but what about when you develop any UI with the help of JavaScript or React or Angular or any client side framework/library and there come multiple mythology and framework and most common is the "Selenium". But today I did some research on "Cypress" which is very easy, user friendly and specially if developer want to use to write their unit test case for UI/Browser page, it is really helpful with just few basic commands to start with and this is open source and free to use and contribute.

Here are the steps for you to start with.

1. Open CMD
2. Run below command to install cypress

        npx cypress install --force

3. Create any folder and move inside that folder on CMD like I have created the folder "Test\cypress" and then moved inside with the help of command on CMD "cd Test\cypress".
4. Run below command to add cypress node_module to your application(folder you created as test application)

        yarn add cypress

5. Run below command to start cypress and even this will give you some sample test as well inside "cypress/integration/examples"

        npx cypress open

        Fyi - when you run above command it will above the window which will have all the test file available inside your folder and to test that just click on respective file  or click the right side button "Run all specs".

6. Now run below command to open your folder/test-app into vs code

        Code .

7. Now "Just to run basic example first", create a .js file like I have created "sample_spec.js" inside integration folder to write some test case now and here I have just created three test cases just  with hardcoded value true false to see the result, so the first two is matched case where the expected and equal both value is true, so as result first both test case will be pass and the third test case will fail as expected is true but the equal value is false.

                Now to test it(above file),                 

• Either use the window which was open on running the command "npx cypress open" reference to above step 5 and there you will find your file and click on your file and it will start your test in browser and will give you result like blow. In case you did not find this window you can run again same command on your VS code terminal.
• Or run directly open the test into browser with the command ".\node_modules\.bin\cypress run --browser chrome".

8. Now "advance example", where I am writing test case to visit/request Discovery Hub url and then find the login link and redirect to login page and enter user name and password and click on submit button and redirect to create article page. I also used pause here just to show you how you can do pause and start again.

                   Now run the above file

                  Here is the result on pause and then to start click again on play button

                      Here is the final result