We test Web UI on F # and canopy

Good day! Recently, I started to get involved in functional programming, so in this article I would like to share with you my findings. I am very sympathetic to the minimalism of the syntax of functional languages. The power and beauty that a few lines of code carry.

In the process of UI testing my working project in C # and selenium, I wondered how the test scripts would look in one of the functional languages. My choice fell on F #. Searching, I came across a very interesting framework called canopy , which is based on the well-known selenium and fully implemented in the F # language. From the very first lines of the code, he impressed me with his simplicity and minimalism of the syntax, which allows you to simplify complex things.

As an example, let's look at the simplest test case from the main page of the site . To start, you need to install the nuget canopy package and download the webdriver for your browser.

//these are similar to C# using statements open canopy open runner open System //start an instance of the firefox browser start firefox //this is how you define a test "taking canopy for a spin" &&& fun _ -> //this is an F# function body, it's whitespace enforced //go to url url "http://lefthandedgoat.imtqy.com/canopy/testpages/" //assert that the element with an id of 'welcome' has //the text 'Welcome' "#welcome" == "Welcome" //assert that the element with an id of 'firstName' has the value 'John' "#firstName" == "John" //change the value of element with //an id of 'firstName' to 'Something Else' "#firstName" << "Something Else" //verify another element's value, click a button, //verify the element is updated "#button_clicked" == "button not clicked" click "#button" "#button_clicked" == "button clicked" //run all tests run() printfn "press [enter] to exit" System.Console.ReadLine() |> ignore quit() 

With the naked eye it is clear that the code is very simple and readable. After starting the program displays a brief report with the results.
')


But this is not all. I want to tell you about the main buns for full-fledged UI testing.

There is a possibility of testing with slowing down and selection of elements with which the test works. All you need is to add one more ampersant sign (&) after the test name.

 "taking canopy for a spin" &&&& fun _ -> 

Now we see the elements with which the test works.



If we need to specifically select any element, use the function

 highlight ".btn" 

It is very easy to make screenshots using the function: screenshot. All you need to specify the path and name of the screenshot

 let path = Environment.GetFolderPath(Environment.SpecialFolder.ApplicationData) + @"\canopy\" let filename = DateTime.Now.ToString("MMM-d_HH-mm-ss-fff") screenshot path filename 

You can complicate and improve our test by adding a function that makes a screenshot for any test not passed:

 onFail (fun _ -> let pathToReports = __SOURCE_DIRECTORY__ + @"\canopy\" let filename = System.DateTime.Now.ToString("MMM-d_HH-mm-ss-fff") screenshot pathToScreens filename |> ignore ) 

As a result, if any of the tests fail, a screenshot is added to the “canopy” folder located in the project root.

Another interesting feature can be found when generating a report. All that is required of us is to add the use of an implemented html reporter. After launch, we see that the report was generated in a convenient HTML format, in addition to the screenshots of the browser for failed tests. To automatically save the report, add a couple of lines of code:

 let liveHtmlReporter = reporter :?> LiveHtmlReporter liveHtmlReporter.reportPath <- Some pathToReports 

To run the javascript script, use the js function.

 //give the title a border js "document.querySelector('#title').style.border = 'thick solid #FFF467';" 

To simulate pressing a keyboard key, we use the function press tab, press enter, press up, etc. This is only a small part of the interesting functions to perform complex work, showing the strengths of the framework minimalism.

Total, what we have. The framework is very easy to use, which allows you to write simple, concise and readable tests that are understandable to the developer of any level. Using canopy, you can build quite comfortable and informative reports, both on passed tests, and on failed.