End-To-End Testing Of Your Web Applications With Canopy

This article will introduce to you canopy - selenium-based end-to-end testing framework that uses F#.

Why Is Canopy Stabilization Layer Built on Top of Selenium?

One of the most crucial concepts of Canopy is reliability - when performing an action the framework tries, during the time span specified via elementTimeout or compareTimeout or pageTimeout, before failing. This improves the experience of writing tests.

Expressiveness

The syntax looks pretty self-explanatory:

  1. "Bio should contain twitter link" &&& fun _ ->       
  2.     url "https://github.com/Wkalmar"       
  3.     ".user-profile-bio" == "https://twitter.com/BohdanStupak1"  
F#

In one of my previous articles, I have already expressed my opinion regarding power and expressiveness of F#.

Writing More Tests

To start, just create a console application, install nuget package canopy and create tests in Program.fs like below:

  1. open canopy.configuration  
  2. open canopy.runner.classic  
  3. open System  
  4. open canopy.classic  
  5.   
  6. //set path for chrome direver explicitly  
  7. chromeDir <- "C:\\"  
  8. start chrome  
  9.   
  10. "Left bottom repostitory should be stationwalk.server" &&& fun _ ->  
  11.     //visit the following url  
  12.     url "https://github.com/Wkalmar"  
  13.     //get 4th child of the following selector  
  14.     let repo = nth 4 ".pinned-repo-item"  
  15.     //get element with the following selector inside repo element  
  16.     let firstRepoCaption = repo |> someElementWithin ".js-repo"  
  17.     match firstRepoCaption with      
  18.     | Some caption -> read caption == "stationwalk.server" //if found read element caption   
  19.                                                            //and compare it  
  20.     | None _ -> failwith "Element not found" //if none element found throw an exception  
  21.   
  22. "Left bottom repostitory should be stationwalk.client" &&& fun _ ->  
  23.     url "https://github.com/Wkalmar"  
  24.     let repo = nth 5 ".pinned-repo-item"  
  25.     let firstRepoCaption = repo |> someElementWithin ".js-repo"  
  26.     match firstRepoCaption with  
  27.     | Some caption -> read caption == "stationwalk.client"  
  28.     | None _ -> failwith "Element not found"  
  29.   
  30. "Bio should contain twitter link" &&& fun _ ->  
  31.     url "https://github.com/Wkalmar"  
  32.     ".user-profile-bio" == "https://twitter.com/BohdanStupak1"  
  33.   
  34. run()  
  35.   
  36. printfn "Press any key to exit..."  
  37. Console.ReadKey() |> ignore  
  38.   
  39. quit()  
Accessing IWebDriver

If you've ever written tests with Selenium using C#, you might be aware of IWebDriver interface which you still might use for some advanced configuration. For example, let's say we want to run our tests with a browser opened fullscreen. Then we can add the following function to our Program.fs file

  1. let maximizeBrowser (browser : IWebDriver) =      
  2.   browser.Manage().Window.Maximize()  
Accessing IWebElement

Most of canopy's assertions, i.e., == accept as a parameter either a string which can be css or xpath selector or instance of IWebElement type which again might be already familiar to you if you've ever written selenium tests using C#. So let's say we want to upload something into file upload control.

  1. let uploadFile fullFilePath =  
  2.   (element "input[type='file']").SendKeys(fullFilePath)  
Splitting Up Big File

Patterns which I've practiced to keep test project maintainable include extracting selectors into page modules and moving tests to separate files.

Let's revisit our github example by moving out selectors into the separate module:

  1. module GithubProfilePage  
  2.   
  3. let pinnedRepository = ".pinned-repo-item"  
  4. let bio = ".user-profile-bio"  

Now we can reference them in the test which we'll move into a separate module too:

  1. module GithubProfileTests  
  2.   
  3. open canopy.runner.classic  
  4. open canopy.classic  
  5.   
  6. let all() =  
  7.     context "Github page tests"  
  8.   
  9.     "Left bottom repostitory should be staionwalk.server" &&& fun _ ->  
  10.         url "https://github.com/Wkalmar"  
  11.         let repo = nth 4 GithubProfilePage.pinnedRepository  
  12.         let firstRepoCaption = repo |> someElementWithin ".js-repo"  
  13.         match firstRepoCaption with  
  14.         | Some caption -> read caption == "stationwalk.server"  
  15.         | None _ -> failwith "Element not found"  
  16.   
  17.     "Right bottom repostitory should be staionwalk.client" &&& fun _ ->  
  18.         url "https://github.com/Wkalmar"  
  19.         let repo = nth 5 GithubProfilePage.pinnedRepository  
  20.         let firstRepoCaption = repo |> someElementWithin ".js-repo"  
  21.         match firstRepoCaption with  
  22.         | Some caption -> read caption == "stationwalk.client"  
  23.         | None _ -> failwith "Element not found"  
  24.   
  25.     "Bio should contain twitter link" &&& fun _ ->  
  26.         url "https://github.com/Wkalmar"  
  27.         GithubProfilePage.bio == "https://twitter.com/BohdanStupak1"  

Our Program.fs will look like this:

  1. open canopy.configuration  
  2. open canopy.runner.classic  
  3. open System  
  4. open canopy.classic  
  5.   
  6. chromeDir <- "C:\\"  
  7. start chrome  
  8.   
  9. GithubProfileTests.all()  
  10.   
  11. run()  
  12.   
  13. printfn "Press any key to exit..."  
  14. Console.ReadKey() |> ignore  
  15.   
  16. quit()  
Running Test in Parallel

Recently, Canopy had a major upgrade from 1.x to 2.x and one of the great new features is the ability to run tests in parallel.

Let's revisit our example by using this ability:

  1. module GithubProfileTests  
  2.   
  3. open canopy.parallell.functions  
  4. open canopy.types  
  5. open prunner  
  6.   
  7. let all() =    
  8.     "Left bottom repostitory should be stationwalk.server" &&& fun _ ->  
  9.         let browser = start Chrome          
  10.         url "https://github.com/Wkalmar" browser  
  11.         let repo = nth 4 GithubProfilePage.pinnedRepository browser  
  12.         let firstRepoCaption = someElementWithin ".js-repo" repo browser  
  13.         match firstRepoCaption with  
  14.         | Some caption -> equals (read caption browser) "stationwalk.server" browser  
  15.         | None _ -> failwith "Element not found"  
  16.   
  17.     "Right bottom repostitory should be stationwalk.client" &&& fun _ ->  
  18.         let browser = start Chrome          
  19.         url "https://github.com/Wkalmar" browser  
  20.         let repo = nth 5 GithubProfilePage.pinnedRepository browser  
  21.         let firstRepoCaption = someElementWithin ".js-repo" repo browser  
  22.         match firstRepoCaption with  
  23.         | Some caption -> equals (read caption browser) "stationwalk.client" browser  
  24.         | None _ -> failwith "Element not found"  
  25.   
  26.     "Bio should contain twitter link" &&& fun _ ->  
  27.         let browser = start Chrome          
  28.         url "https://github.com/Wkalmar" browser  
  29.         equals GithubProfilePage.bio "https://twitter.com/BohdanStupak1" browser  

The key trick to follow here is that each test operates now with its own copy of browser and assertions are now taken from open canopy.parallel.functions to accept browser as an argument. Also, please note the prunner dependency which can be taken from here.

Headless Testing

Testing in a headless browser seems to be the new black now. Although I don't share the sentiment, I still can assure you that testing in headless browsers is supported by Canopy. You can run your tests in headless Chrome as follows:

  1. let browser = start ChromeHeadless  
Conclusion

I hope this article has convinced you that Canopy is a robust and easy to use framework which can be used in building end-to-end testing layers of your application.