Today we announced that Runscope has acquired Ghost Inspector, a cloud-based browser testing service. In addition to letting you quickly create UI tests for your websites without writing any code, Ghost Inspector is also integrated with Runscope Radar so you can add UI test steps to your automated API tests.
Browser Test, Meet API Test
So, what are some use cases that intersect UI and API testing? For an API that integrates into web applications, there are a multitude. Combining Runscope with Ghost Inspector can help create end-to-end test coverage, from the backend to the front end, and all of the interactions in between.
A great example at this intersection is OAuth. Runscope is already capable of testing OAuth protected services by fetching access tokens programmatically; however, for 3-legged flows, where the end-user is directed to the OAuth provider for credentials and scope/permission, a browser testing tool is best suited because that authorization interface is designed for humans, not machines.
Walkthrough: Testing an OAuth API From End-to-End
By combining the capabilities of Runscope and Ghost Inspector, we are now able to perform comprehensive end-to-end application and API integration testing and monitoring. Lets go ahead and create a sample test that will perform the following tasks:
1. Test the UI of an OAuth sign in process using Ghost Inspector
2. Using the authorization code from the previous step, test the OAuth API by exchanging the auth code for an access token using Runscope
3. Using the access token from the previous step, test the actual API by fetching protected user resource information using Runscope
We’re going to use the GitHub API for this example. Many of you are familiar with GitHub, and their API is well documented.
Creating a Ghost Inspector Test
Ghost Inspector supports two ways for creating tests:
- Manually - you provide the starting URL and define each test step by hand
- Automatically - using a Chrome extension, a live web session is recorded and all test steps are automatically imported into Ghost Inspector
For this example, we’ll build our UI test manually, which is much easier than it sounds. Our test will cover signing in to a web application using GitHub credentials. We’ve stood up a simple web application that handles the OAuth sign in process. Lets begin with the steps for creating our Ghost Inspector UI test:
1. Sign up for Ghost Inspector. Create a free account and sign in.
2. Create a Test Suite, which is similar to a Runscope bucket.
3. Create a new test. We’ll name the test, “BabyUnicornMagic Sign In with GitHub”, set the start URL to the front page of the web app, and use a blank test template, because we’ll be adding our own steps.
4. Add the steps. After the test is created, click on the Add Steps button. We’re going to add five steps to our Ghost Inspector test. These steps will take care of singing into the web app with our GitHub credentials.
Ghost Inspector uses CSS selectors to identify elements to interact with on a page. Recent versions of Chrome or Firefox can help to extract the unique CSS selector values from the DOM. Simply right-click on the element and choose “Inspect Element”. From within the inspector, right mouse-click again on the highlighted element, and choose “Copy CSS Path” in Chrome, or “Copy Unique Selector” in Firefox.
Each test step in the screenshot above contains a CSS selector. Step #1 clicks on a sign in link, which initiates the authorization flow. By the time we reach Step #2, the Ghost Inspector browser will be on the GitHub login page -- this step, and Step #3 instruct the Ghost Inspector to populate the login form with our GitHub username and password. Step #4 submits the form. Step #5, our last step, will click on the “Authorize” button that is displayed the first time our GitHub account approves this app. On subsequent test runs, GitHub will skip this step -- thus, we’ll make this step optional.
5. Save the authorization code by stopping the Ghost Inspector test. We’re going to add a Network Filter to our test, instructing the Ghost Inspector browser not to follow the auth code redirect URL. This will preserve the code for later use.
At the bottom of the Ghost Inspector test editor, click the Add Filter button. We paste the app’s OAuth redirect URL in this field.
Run the Ghost Inspector Test, Watch the Video
And that completes our first Ghost Inspector UI test! After it's saved, we run the test by clicking Execute Test. The test will take 5 to 10 seconds to complete. Every Ghost Inspector test run is video recorded, revealing every test step, from text inputs, mouse clicks to page transitions. Below is an actual video of our test run:
Integrate Ghost Inspector With Runscope
Now we’re going to set up the Runscope Radar API test that will integrate the Ghost Inspector test we just finished creating above:
1. Connect Ghost Inspector to Runscope with an Integration. Adding the Ghost Inspector integration is simple -- just click on Integrations from the Radar menu, then click Connect Ghost Inspector from the list of services.
2. Create a new Radar test; add the Ghost Inspector test. Now that we've connected Ghost Inspector to Runscope, a new button is available in our Runscope Radar test editor: Add a Ghost Inspector Test. When we click that button, our Ghost Inspector test suites and respective tests appear. Lets select the new UI test we've just created.
3. Extract the authorization token from the Ghost Inspector test. Recall earlier that in Ghost Inspector, we configured the test to stop right before the auth token exchange. We use JavaScript to extract the authorization code and store it in the variable {{auth_code}}.
4. Test the OAuth API access token generator. The next step in our test plan will exchange the authorization token for an access token. Below we configure the request to the GitHub OAuth API. Both {{client_id}} and {{client_secret}} are defined as Initial Variables. We also extract the access token into the variable {{access_token}}.
5. Test a protected resource API method. With the newly minted access token, we'll test the API method to fetch the email addresses associated with the authenticated GitHub user account. Lets also set up an assertion that validates the account's email address.
Runscope + Ghost Inspector = Better Software
That's just one example of how Runscope and Ghost Inspector can help to build more comprehensive tests that span the API as well as the application that integrates with the API. On their own, both Runscope and Ghost Inspector are very poweful tools for automatically monitoring, testing and debugging APIs and web applications, respectively. However, these tools combined provide you with a new dimension of holistic test coverage, resulting in better software for your users.
If you have any questions or need any help, drop us a line. Our support team is always ready to help.