Ghost Inspector is 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 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.