Creating a Test From Scratch II

Welcome to part II of the "Creating a Test From Scratch" series. If you didn't bother to look at part I, then click here now! Before it is too late! Also, for the purposes of this tutorial, my baseURL variable will be set to "http://newtours.demoaut.com/". So it will look like: private const string baseURL = "http://newtours.demoaut.com/"; I would recommend you do the same, so that you can follow along.
Also, something that may be of use to you would be using web developer tools in your browser of choice so you can look at the source code of the website this tutorial focuses on. If you use Google Chrome or a modern version of Internet Explorer (I think IE 9 and up) pressing F12 will allow you to look at elements in the code of the webpage. If you use Firefox, then you will want to download the free add-on, Firebug for your version of Firefox.

Let's Build a Test Script

Before we go any further we should ask ourselves what the advantage of creating a script from scratch is. By creating tests from scratch we can gain a deeper understanding of how SharpSauce works. Also, we know what every line of our test script does, which may or may not be true if you import it from Selenium. Another good reason is that Selenium isn't foolproof. The scripts generated by Selenium may not work 100%. This may require that you be able to touch up the code generated by Selenium to have a working script. Finally, Selenium doesn't support all web elements. Things like Radio buttons can lead to error-filled tests. Fortunately, learning about the versatility provided by SharpSauce, you should be able to incorporate radio buttons into your tests. By now you should have your test configuration variables set, your chosen test template in place, and a blank test script. Now we can begin to populate the test script with an actual script. The first thing you will want to do is be familiar with how the test script of UnitTest3.cs is structured, because we will use that as a starting point. The first line we will want to add is `driver.Navigate().GoToUrl(baseURL + "/");`. Now, as discussed in the opening paragraph, our baseURL should be set mercury tours demo site. This is a decent, public site that allows us to use more advance features of SharpSauce like logging in and selecting items from dropdown menus. This line of code is what tells our saucelabsdriver which URL to go to at the start of the test. If you are wondering about the initialization of the wait variable, that isn't necessary because we can achieve the same result a better way. We will discuss this later.

Using SharpSauce Effectively

This section is devoted to showing you how SharpSauce methods can be used to make your test scripts clean, easy to read, and efficient.
You will need to be able to look at the code of webpage elements to get the most out of this tutorial. Elements are items on webpages such as text fields, links, and buttons. Every element has code and all should have a set of attributes in the code. An attribute is something that an element can use to configure itself, such as "name=Username". Elements have many different attributes. Some may have an ID, others may have a name, some may have both, and some may have neither. Ideally, an attribute will be a unique way of identifying a web element. Unfortunately, in a lot of cases, sometimes attributes are reused meaning that more than one element can have a "name=a" attribute. There is no way around this other than to pick an attribute or a tag-attribute combination you know to be unique to your particular element. For the record, ID is the best way to identify an element as that should be unique to each individual element. If your element doesn't have an ID, then look for a name. Failing that, search for an attribute that should be unique.

Logging in

Looking at the Mercury Tours webpage we can see that there is a username and password text field. The great thing about this public site is that there is a built in account that everyone can use. If you enter "tutorial" as the username and password you will successfully sign into Mercury Tours. Generally, in order to automate logging in, we would need at least five lines of code. However, thanks to the magic of SharpSauce, we only need one line. One line and a little bit of information about the text fields.
If you type "driver." Visual Studio will create a menu where you can see all the methods and attributes tied to that object. There are a lot of them, but they are in alphabetical order, so if you scroll down to the "L"s you should see three methods:
loginByAttribute
loginByName
loginByID
I will provide a brief explanation of what each one does and what the differences all three methods have. All the loginby methods assume that there are two text fields on your webpage, one for a username or username equivalent, and one for a password. It also assumes that both have the same attribute type. (For example, if you choose loginById it assumes that both the username and password fields have ID attributes) If you open your web developer tool and use the magnifying glass icon, you should be able to select individual elements. Go ahead and use this to select the Username text field.
We can see that the username text field has three attributes: type="text", name="userName", and size="10". Notice that there is no ID attribute. Luckily, the element does have a name attribute and it appears like it should be unique to this element. This means we will most likely be using the name attribute to log in.
Now, use the magnifying glass tool to inspect the Password field. Once again this filed has the same three attributes. Notice how "type" and "name" are set to different values than the userName's attributes of the same names. We decided to use the name attribute for the userName field, which means we have to use the name attribute for the password field (if we want to use the loginByName method). We can see that it says name="password", which also should be unique to this element.
So, we have decided to use the loginByName method. How do we use it? Start typing:
driver.loginByName(
At this point, Visual Studio should be providing information about what parameters are necessary for this method. We can see they are all strings, and the first string is the Username value, the second is the password value, the third is the Username element name attribute, and the fourth is the password element name attribute. That may be a bit confusing, but here is an example how it should look like given what we know about the userName and password fields. Also, for this example, "tutorial" is both our username and password. ``` driver.loginByName("tutorial", "tutorial", "userName", "password"); ``` If you were to run the test right now, (Don't. You will likely get errors, because you don't return anything) you would navigate to http://newtours.demoaut.com/ and type "tutorial" into both the userName and password fields and instantly sign in. If you wish to run it and make sure that the test does what I claim, you may wish to type "return true;" as the last line of your script. You should be able to run it now.
So, hopefully the login method makes sense, loginByName and loginByID work the same way, except one uses name attributes and the other uses ID attributes. LoginByAttribute works a bit differently than the other two methods. This method should only be used if the username and password field elements have no ID or name attributes. What this method allows you to do is find the corresponding fields by any attribute they might have.
Like the first two methods, the first two parameters of loginByAttribute are what will be typed into the username and password text fields. The other four are the username attribute, what the username attribute is equal to, the password attribute, and what the password attribute is equal to, respectively. So for example, if the username and password fields didn't have name attributes on the Mercury tours site, we could use loginByAttribute method like so: ``` driver.loginByAttribute("tutorial", "tutorial", "type", "text", "type", "password"); ``` In the above example I chose the "type" attribute since the only other attribute that username and password had that wasn't the same. If I had chosen "size", then the log in would fail because size is set to 10 for both elements, and the method wouldn't know which I am referring to. Unfortunately, the mercury tours site elements only have three attributes, so to get a better idea of the flexibility of loginByAttribute let us use a hypothetical example. Suppose the code for the username element looks like this:
``
and that the code for the password element looks like this:
``
Now we can use loginByAttribute in several different ways. If we wanted to log in by the type attributes it would look like this:
`driver.loginByAttribute("tutorial", "tutorial", "type", "UsernameField", "type", "PasswordField");`
loginByAttribute does not assume that the two elements have the same attributes, meaning we can use loginByAttribute like this:
`driver.loginByAttribute("tutorial", "tutorial", "type", "UsernameField", "specialAttribute2", "unnecessary");`
Unfortunately, we can't use the size or specialAttribute1 since those two attributes have the same values for both elements. However, now you hopefully see how powerful and flexible the loginByAttribute method is. Keep in mind that this should be your last resort. There is a decent chance that attributes other than ID are not unique and could be used repeatedly on a webpage. If the same attribute has the same value on two different elements, then the login method will use the element that appears first on the webpage.
So that covers logging into a webpage that uses text fields to log in. Next, we will look at radio buttons and drop down menus.

Radio Buttons and Drop Down Menus

So now that you have logged in to Mercury Tours using the "tutorial" account you should be at a new webpage with a couple radio buttons and drop down menus. These sort of elements are common on web apps, but, surprisingly, Selenium created test scripts can't handle these elements. Fortunately, SharpSauce can handle these elements.

Radio Buttons

The first element on this new page is a radio button that requests you select either a "Round Trip" or "One Way" trip. Use the magnifying glass tool to select one of the clickable buttons. In the image below, I selected the "One Way" button.
Much like the text field elements on the previous page, this element has three attributes:
``
If you type "driver.clickRadioButtonByName( " Visual Studio will tell you that you need two parameters for this method. The first is a string, "ButtonName" and the second is another string called "buttonValue". Hopefully the names are self-explanatory, but just in case: The first parameter is the value of the name attribute of the element. The second parameter is the value of the value attribute. Time for an example. By default, the page has the "Round Trip" button selected. What if we wanted to select the "One Way" button? We could use this line:
`driver.clickRadioButtonByName("tripType", "oneway");`
This makes the SharpSauceDriver search for elements that have a "tripType" name, and it then finds the one with the value "oneway", and clicks on it. Much like the loginBy methods, the clickRadioButton methods have different implementations to suite different situations. Currently, there are two methods, clickRadioButtonByName and ClickRadioButtonByID. Each method requires that the desired radio button element has the corresponding attribute (name and id, respectively)to find the element by. Trying to use ClickRadioButtonByID on a radio button with no id will only result in an error. Now that we have covered the basics of radio buttons, let's work on selecting an item from a drop down menu.

Drop Down Menus

Now that we have clicked on a radio button, we can move on and select an item from one of the many drop down menus on the webpage. We may as well choose the drop down menu right below the two radio buttons we looked at previously. This menu is for selecting the number of passengers. Let's see how to use SharpSauce to select a certain number of passengers.
Much like the login methods we have three different methods for selecting a value from a drop down menu:
SelectDropDownValueByAttribute
SelectDropDownValueByID
SelectDropDownValueByName
These methods work much like the loginBy methods. Just like the loginBy methods, we will have to know more about the attributes of the element. Use the magnifying glass tool to select the drop down menu next to the text "Passengers: " as shown in the picture below.
![FromScratch7] (https://raw.github.com/simnova/SharpSauce/master/wiki%20Images/FromScratchImg7.png)
Interestingly enough, this element only has a name attribute. Luckily, we are covered because we have a SelectDropDownValueByName method. So, if we wanted to use this method to select 3 passengers instead of 1 we could use the SelectDropDownValueByName method like so:
`SelectDropDownValueByName("passCount", "3");`
As you may have figured, the first parameter is the name attribute of the drop down element. The second parameter is which value you want to select from the menu. Both of these parameters are strings. This is important. You may have noticed that the code for the element is collapsible, and that if you un-collapse it, you can see the code for each option has a value, and that value is an integer. You actually don't have to worry about this value. The value that you should use as a parameter is the actual value that appears in the menu on the webpage. To demonstrate this we can use the "On: " menu below the "Departing From: " drop down menu. This menu contains all twelve months. No numbers. The name attribute is "fromMonth". If we wanted to select July from this menu we would use the SelectDropDownValueByName method like this:
`SelectDropDownValueByName("fromMonth", "July");`
Notice that through the magnifying glass tool, selecting the month menu and un-collapsing it reveals that even though all the items in the menu are strings of letters, their values in code are integers. However, we still used the actual in-menu item name.
This concludes this tutorial. We have covered logging in, radio buttons, and drop down menus. All of the features we have covered are SharpSauce specific and created to help you maximize the thoroughness of your tests while minimizing the amount of code you need.