Airloading7

Using Node.js, selenium-webdriver, Visual Studio Code and Firebug I came up with: var assert = require ('assert'); var webdriver = require ('selenium-webdriver'), By = webdriver. By, until = webdriver. Until; var driver = new webdriver. ForBrowser ('firefox'). Build ; driver. Get ('http:/libraryinformationsystem.org'). Supported Visual Studio versions. This installer works with VS 2012 Update 4, VS 2013 Update 5, VS 2015 and updates and VS 2017 RC. Running tests using Microsoft Edge browser. Users can run their Coded UI tests on Edge Browser using Visual Studio 2015 Update 2 or later versions.

Create a Coded UI Test using Selenium in Visual Studio

If you performed the previous lab, you will have used a screen recorder to create a coded UI test. While screen recorders are convenient, they often do not provide the level of control needed for more sophisticated testing.

In this lab, you will learn to create a coded UI test based on Selenium. The Selenium automation tools speak a language known as Selenese. Rather than issuing Selenese directly to the different types of browsers, web drivers are used to perform the translation. In this lab, you will install the Chrome, IE, and Firefox drivers, then automate the code from within the C# language in Visual Studio.

Note that there is a Selenium IDE that can be used for recording web actions but using it is not currently recommended. It only works with older insecure versions of FireFox (up to version 5.4). In this lab, we will use the drivers and classes directly from code.

For the purposes of the lab, we will use the PartsUnlimited web application hosted on Azure to run this lab.

Selenium Visual Studio Code Tutorial

There have been reports that the keyword search on the home page is intermittently performing poorly. We will investigate how the keyword search on the home page performs, both by entering values into the box and clicking the search icon, and by directly referencing the search term a URL.

DevOps MPP Course Source

• This lab is used in course DevOps200.5x: DevOps Testing - Module 5.

Selenium Visual Studio Code Python

Lab Video:

Pre-requisites:

• Visual Studio 2017
• Google Chrome (recent edition) https://www.google.com.au/chrome/browser/features.html
• Access to the PartsUnlimited website deployed at http://cdrm-pu-demo-dev.azurewebsites.net/

Lab Tasks:

• Create a coded UI web test in C#

Estimated Lab Time:

• approx. 30 minutes

Learn to use the Parts Unlimited Search Functionality

1. In a Chrome browser, launch the PartsUnlimited web application by going to the URL http://cdrm-pu-demo-dev.azurewebsites.net/

2. This opens the PartsUnlimited application as shown below.

   Ensure that the website opens succesfully.

3. On the home page, in the Search box, enter light and click the Search icon.

4. Note that three products are returned as expected.

5. Also note in the browser search bar that the search item has been added to the URL. We also want to test that direct access to the search works.

6. Click the Parts Unlimited heading to return to the home page.

Locate the IDs of the required elements

1. While in the home page, click F12 to open the developer tools.

2. In the top section of the developer tools, click on the tool to select screen elements.

3. Hover over the search box and note its ID.

   Note that the name is “search-box”.

4. Hover over the search icon and note its ID.

   Note that the name is “search-link”.

   These are the elements that we will automate.

Create the test in Visual Studio

1. Launch Visual Studio Enterprise.

2. From the File menu, click New then Project. In the New Project window, choose a Unit Test Project from the Test category.

3. Add a name for the project, and solution, and a location for the project.

4. In Solution Explorer, right-click References and click Manage NuGet Packages.

5. In the NuGet manager, click Browse, enter selenium as the search term and hit Enter to start the search.

6. Install the following packages, then close the NuGet manager window:
   • Selenium.WebDriver
   • Selenium.WebDriver.ChromeDriver
   • Selenium.WebDriver.IEDriver
   • Selenium.Firefox.WebDriver
   • Selenium.WebDriver.PhantomJS.Xplatform

7. In Solution Explorer, right-click UnitTest1.cs and rename it to PU_SearchTests.cs.

8. When prompted to rename all references, click Yes.

9. Add the following using statements after the ones that are already there:

10. Your code should look like this:

11. Add the following declarations to the beginning of the class. Note that the websiteURL and the required browser should really be parameters but this will be ok for our test:

12. Your code should look like this:

13. Add the following initialize and cleanup methods:

14. Your code should look this this:

15. Replace the test method with the following code:

16. Your code should look this this:

At this point, we have a test that should just start the browser (a Chrome browser), maximize the window, set the timeout, and go to the Parts Unlimited website. We can test it up to this point.

1. From the Build menu, click Build Solution and make sure the solution builds correctly.

2. In Test Explorer (if not visible, from the View menu, click to open it), right-click the SearchForLights test, and click Run Selected Tests to execute the test.

3. You should see the browser open, maximize (if not already), then go to the Parts Unlimited home page.

4. Add the following statements to the test method:

5. Your code should look like this:

6. This will now clear the search box, type the value “light” and search for it.

7. From the Build menu, click Build Solution and make sure the solution builds correctly.

8. In Test Explorer, right-click the SearchForLights test, and click Run Selected Tests to execute the test.

You should see the browser open, maximize (if not already), then go to the Parts Unlimited home page, then search for the lights. You will briefly see the search results page appear before the browser closes.

We also needed to check a direct URL search.

1. Add another test method below the current one:

2. Your code should look like this:

3. From the Build menu, click Build Solution and make sure the solution still builds correctly.

4. In Test Explorer, right-click the DirectSearchForLights test, and click Run Selected Tests to execute the test.

Your new test should also run as expected.

Congratulations! You’ve now completed this lab.

For more information , you can see: Visual Studio: https://aka.ms/edx-devops200.5x-vs01 Web Apps: https://aka.ms/edx-devops200.5x-az03

(The code in this example is Visual Basic.net but could of course be easily transferred into C#). So we have set up Selenium (as described here) and followed some general tips (as described here). Now it’s time to write our first unit test in Visual Studio using Visual Basic.net and Selenium. We will do a rather simple test but it covers several aspects of web testing. We will write a test to check whether a link to our current domain dotnet-developer.de is returned as first result from bing when we search for “dotnet-developer.de”. So we have to write a webtest with these steps:

1. Go to Bing.com
2. Enter “dotnet-developer.de” into the search box
3. Start search by pressing ENTER or clicking the Search-Button
4. Check the first result returned by Bing.com

Helpful tools are Firefox and Firebug. Of course you could write the texts also without these tools but you will see that they will help you a lot, so I recommend to use them.

You could watch a video about the final result on Youtube at http://www.youtube.com/user/dotnetdeveloperde:

Open Bing Homepage

The first step is then to navigate to bing.com so first line of code is:

Enter search text into textbox

Now we want to enter “dotnet-developer.de” into the searchbox. So we need to find out details about the searchbox. Therefore we start Firefox and manually go to “http://www.bing.com” and inspect the homepage within firebug. Click on Firebugs “Inspect”-Icon and select the Searchbox. The corresponding HTML-Code is now marked in Firebug.

In the second line of Firebug use your right mouse-button and click on the leftmost element, in current case it’s “input#sb…..sq_qbox” (when you move the mouse on the items you might notice that Firebug marks there position within the web page). On the right-click menu select “Copy XPath”.

Now the following value is copied: //*[@id=”sb_form_q”] So in current case we got an ID, in other cases you get an Xpath like this: /html/body/table/tbody/tr/td/div/div[6]/div[2]/form/div

Both is fine, but if you have an ID I’d prefer to use the ID rather than the XPath because XPath changes if the design of the page changes but ID will still be the same until the field is renamed (which might appear only in rare cases). Now we need to click in this field from Selenium. First we need to get a handle to it:

So we have a handle to the search box. Now we want to enter some text:

Start the search

As the text is inserted we now want to start the search. This could be done in several ways, e.g. press enter:

Or we could grab the “Search”-Button and click it. So we click again the “Inspect” button in Firebug (as described above) and get the XPath for the button:

So after calling one of these 2 methods Bing should display a result page.

Check Result page

Now we do the same manually in our Firefox instance. So got to http://www.bing.com, enter “dotnet-developer.de” and start the search.

For the test we want to check the first result returned by Bing. So get a reference to it as already described above using Firebugs “Inspect” icon and get the XPath for the first link. It should be like this:

/html/body/div/div/div[2]/div[3]/div/div/div[2]/div/div/div/ul/li/div/div/div/h3/a. So we get the web element as usual but we will see that the XPath depends on whether Bing e.g. displays adverts or not. For example when we use Bing to search for “Microsoft” we will get this XPath:

/html/body/div/div/div[2]/div[3]/div/div/div[2]/div/div/div[2]/ul/li/div/div/div/h3/a. See the difference? So using the proposed XPath might work now but will fail if Microsoft starts displaying ads for the search term. Anyway, it would be fine if you use this command:

But let’s try to make it work regardless of their ads. Having a closer look at the source code shows that Bing returns the search result in an unordered list of class “sb_results”.

So the better approach would be to start at list “sb_results” instead of the beginning of the document. Using XPath this is rather easy (If you are not familiar with Xpath you might start with the Wikipedia Article).

Default XPath:

/html/body/div/div/div[2]/div[3]/div/div/div[2]/div/div/div/ul/li/div/div/div/h3/a

New Xpath:

//ul[@class=’sb_results’]/li/div/div/div/h3/a

So we now have a handle to the first link in the Resultlist. Again we have several options. First we could check the text. It is available in WebElements property “Text”:

Of course this works fine, but only if the subject of dotnet-developer.de is not changed. So of course it would be better to check for the link, not for the text.

Selenium Javascript Visual Studio Code

When we have a look at the source code of the Bing result page we see the structure of the first link looks like this:

<a h=”ID=SERP,5082.1″ href=”http://www.dotnet-developer.de/”><strong>dotnet-developer.de</strong> | Tips for vb.net,…</a>

As usual, the anchor has a ‘href’ attribute. Each Selenium Webelement has a method ‘GetAttribute’ where we could specify the attribute to be retrieved. So in current case we want to check attribute ‘href’:

Done!

Visual Studio Code Selenium Webdriver Java

Here is the full source code:

Visual Studio Code Selenium Python