Karate UI Test

This project is designed to be the simplest way to replicate issues with the Karate UI framework for web-browser testing. It includes an HTTP mock that serves HTML and JavaScript, which you can easily modify to simulate complex situations such as a slow-loading element. To submit an issue after you have a way to replicate the scenario, follow these instructions: How to Submit an Issue.

Overview

To point to a specifc version of Karate, edit the pom.xml. If you are working with the source-code of Karate, follow the developer guide.

You can view the HTML source of page-01.html to see how it works. It depends on karate.js which is very simple, so you can see how to add any JS (if required) along the same lines.

The code in MockRunner.java starts a Karate HTTP server. Note how it is very simple - but able to serve both HTML and JS. If you need to include navigation to a second page, you can easily add a second HTML file. To manually verify the HTML that will be served, you can start the mock-server by running MockRunner as a JUnit test, and then opening http://localhost:8080/page-01 in a browser. And yes, hot-reloading is possible !

Running

The test.feature is a simple Karate UI test that can be executed by running UiRunner as a JUnit test. You will be able to open the HTML report (the file-name will appear at the end of the console log) and refresh it when re-running the test. For convenience, this test is a Scenario Outline - set up so that you can add multiple browser targets or driver implementations. This makes it easy to validate cross-browser compatibility.

Debugging

You should be able to use the Karate extension for Visual Studio Code for stepping-through a test for troubleshooting.

WebDriver Tips

If you are targeting a WebDriver implementation, you may need to experiment with HTTP calls. Don’t forget that that is Karate’s core competency ! So you can use a “scratchpad” Karate test on the side, like this, after you have manually started a “driver executable”, chromedriver in this case:

Feature:

Scenario:
* url 'http://localhost:9515'
* path 'session'
* request {"capabilities":{"browserName":"msedge"}}
* method post

Within a test script, as a convenience, the driver object exposes an http property, which makes it easy to make custom-crafted WebDriver requests using the Http helper / class. Note that this will be available only after the driver keyword has been used, and thus a WebDriver session has been initialized.

Here is an example of getting the page title:

* def temp = driver.http.path('title').get().body().asMap()
* print 'temp:', temp

Which results in a GET request to: http://localhost:9515/session/{sessionId}/title - and the response body will be printed. Now you can easily extract data out of the response JSON.

And here is how you can make a POST request, to navigate to a given URL:

* driver.http.path('url').post({ url: 'https://github.com' })

And note that the official Karate plugins are really convenient for re-running tests - or you can pause a test using a break-point and type in interactive commands.

DevTools Protocol Tips

When using the driver type chrome, you can call the send() method and pass a raw JSON message that will be sent to the Chrome browser using a WebSocket connection. For example here is how to get the metadata about frames:

* def temp = driver.send({ method: 'Page.getFrameTree' })
* print 'temp:', temp

This will result in the following raw message sent (Karate will supply the id automatically):

{"method":"Page.getFrameTree","id":7}

Chrome will respond with something like this, which should be viewable in the log / console:

{"id":7,"result":{"frameTree":{"frame":{"id":"11B3A5ABDEE5802201D84389EE0215B8","loaderId":"D2241AD7B86ED533F095F907A78A1208","url":"http://localhost:52664/page-01","securityOrigin":"http://localhost:52664","mimeType":"text/html"}}}}

You can do more, but this should be sufficient for exploring the possible commands and troubleshooting via trial and error. And then you can suggest / contribute changes to be made to the code, e.g. the DevToolsDriver.