TGIMBA .NET Core Upgrade – Login Page Selenium Integration Test

NOTICE: The TGIMBA git hub repository has been corrupted and I had to start over.  The link to the repository is here -> Git  Code Commit

Selenium_Tests Git  Code Commit (this and all commits back to my last blog post)

Welcome back!

Today I am going to add the login page integration test step for all four clients. If you remember, I started this as a re-write of the .NET 4.6.x C# website/Application Programmatic Interface (API) to .NET Core since it is the future. However, when I moved to Austin, it became apparent to me that multiple JavaScript web clients are hot. I started with Angular 4 late in 2017 only to discover that it has rapidly moved to Angular 6 Type Script. React JS Redux is also very hot. Additionally, I had always planned to re-implement TGIMBA in native JavaScript. So, after a lot of reading and playing, I decided to do all four for each page of the rewrite. More specifically, for each page on the rewrite, I will create a client for JQuery, Vanilla JavaScript, Angular 6 Type Script and React JS Redux.

Now that the login page is done, I need the integration test. The easiest way to do this is to use a technology like Selenium to test each client in a browser. I could use other technologies (if you remember, I used JSTest for the Vanilla JavaScript unit tests), but this is the easiest and will cover all four clients.

The first step is to resurrect the .NET 4.6.x Selenium project. I cloned the project, reinstalled some nuget packages and was able to compile. Since I hadn’t touched in since March of 2016, I was expecting this to be a bit harder. So far so good 🙂 Additionally, I am not going to upgrade this project to .NET Core now. It is a bit old at .NET 4.5, but it is good enough for my efforts since most of the tests are already written 🙂

Reviewing the file structure, it looks like I had previously used Internet Explorer, Chrome and Fire Fox. Since Internet Explorer is no longer a thing, I decided to drop that code and rely on Chrome and Fire Fox.  Another big change I made was to remove the desktop/mobile separation of tests. If I am successful in my effort, there will only be one version of each client and the mobile/desktop/etc. distinctions will be handled via Cascading Style Sheets (CSS). That means only one set of tests here (i.e. purely functional).  The last big change was to add urls for each client.  So in the end, the final set up looks like this…one test that loops through a Chrome and Fire Fox set of tests for each client.

1

I added Utilities -> GetUrls() to supply the local host addresses to call when running the tests.  Notice that the Vanilla and JQuery JavaScript clients are on the same web site.  I am still in the early phases of learning the Angular 6 and React JS technologies, but this fact alone makes me think I will stick with Vanilla JavaScript for my final client that is deployed on production.  It is much simpler to deal with.  Time will tell 🙂

2

Additional Items

  • Most of my previous Selenium code worked when I started.  I did have to reinstall the Selenium.Firefox.Webdriver via nuget.
  • I had to add an id to the login/cancel buttons and username/password text boxes for Selenium to see.
  • I modified the Vanilla and JQuery clients to use an alert prompt for the login page like I did for the Angular 6 Type Script and React JS Redux clients.  This was to standardize the result for the Selenium tests.  I never modified my hello world tests from the .NET 4.6.x version, so I am not sure if I will have anything other than happy path tests again.
  • Both the React JS and Angular 6 both started in https.  I had to remove that because Fire Fox would not play nice when running the tests.

Also, something else I need to do before moving on to the registration page is to add unit tests for the controllers in the Angular 6 Type Script and React JS Redux clients. It seems like a lot of duplication, so I will most likely use the existing Vanilla/JQuery site test project.

Now that I have the basic framework for each client and an integration test, I will most likely not post for each page/client combination (unless there is interesting stuff to write about).  My next post should be the completion of the Registration page for each client and that integration test set up.

Stay tuned!

Reference

  1. https://github.com/ehelin/TgimbaSeleniumTests
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s