API Testing in DevWeb using Swagger
Tags: performance, testing, webperf, tutorial
Published: 2020-11-06 00:59:59

<!-- wp:paragraph -->
<p>Last month, Micro Focus had released its newer version of LoadRunner products. You can check it out my last article about <a href="https://qainsights.com/whats-new-in-loadrunner-professional-2020-sp-3/" target="_blank" rel="noreferrer noopener">LoadRunner Professional Service Pack 3</a>. This blog post covers about one of the new feature in LoadRunner 2020 SP 3 - API Testing in DevWeb using Swagger.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>What is DevWeb?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>DevWeb (tech preview version was TruWeb) is a new protocol offering from Micro Focus to performance test applications at HTTP transport level and WebSocket. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The standalone offering is known as LoadRunner Developer which is a cross platform across Windows, Linux and macOS, uses lightweight JavaScript SDK and scalable.</p>
<!-- /wp:paragraph -->

![DevWeb Course](https://qain.si/devweb)

<!-- wp:paragraph -->
<p>If the above link didn't work, please <a href="https://www.udemy.com/course/performance-testing-using-truweb/learn/lecture/19343890?couponCode=YOUTUBE" target="_blank" rel="noreferrer noopener">click here to checkout</a> with the discount code.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>What is Swagger?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Here is the definition from Wiki:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><em>Swagger is an Interface Description Language for describing RESTful APIs expressed using JSON. Swagger is used together with a set of open-source software tools to design, build, document, and use RESTful web services. Swagger includes automated documentation, code generation, and test-case generation.</em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Swagger was developed by SmartBear Software.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>API Testing in DevWeb using Swagger</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>LoadRunner Professional 2020 SP 3 supports API testing in DevWeb using Swagger Specification 2.0</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>All you need is to import the swagger json file in DevWeb, which generates <code>swaggerApi.js</code> file under <strong>Extra Files</strong> as shown below.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":7775,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://qainsights.com/wp-content/uploads/2020/11/image.png" alt="API Testing in DevWeb using Swagger" class="wp-image-7775"/><figcaption>API Testing in DevWeb using Swagger</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>swaggerApi.js contains all the JSON definitions which will get called from <code>Main</code>. Below is the <strong>getPetById </strong>definition from this <a rel="noreferrer noopener" href="https://petstore.swagger.io/" target="_blank">Pet Store Swagger</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>/**
* Find pet by ID
* @param {petId} ID of pet to return
**/
function getPetById(petId){
    const webRequest0 = new load.WebRequest({
        url: `${this.$.getSchema()}://${this.$.getHost()}/${this.$.getBasePath()}/pet/${petId}`,
        method: "GET",
        headers: {
            "accept": "application/json,application/xml"
        },
    })
    return webRequest0;
}</code></pre>
<!-- /wp:code -->

<!-- wp:heading -->
<h2>How to import the swagger file in DevWeb?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Create a new DevWeb script, go to <strong>Record &gt; Import API File </strong>as shown below.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":7777,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://qainsights.com/wp-content/uploads/2020/11/image-1.png" alt="Import API File - Step 1" class="wp-image-7777"/><figcaption>Import API File - Step 1</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Click on <strong>Browse </strong>and browse the downloaded json file as shown below and then click in Import. This will import all the definitions into swaggerApi.js file.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":7778,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://qainsights.com/wp-content/uploads/2020/11/image-2.png" alt="Import API File - Step 2" class="wp-image-7778"/><figcaption>Import API File - Step 2</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>The best way to generate DevWeb script is using HAR file.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:heading -->
<h2>How to generate script from swagger definitions?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>There are two ways you can generate the script: </p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li>Using HAR file</li><li>By recording</li><li>Using OfflineGenerator.exe</li></ol>
<!-- /wp:list -->

<!-- wp:heading -->
<h2>Using HAR File</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>As we are using Pet Store swagger, let us capture the get pet id request and save it as HAR. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Launch https://petstore.swagger.io/#/pet/getPetById in your favorite browser and bring up the Network tool. I am using Firefox to save the request as HAR.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":7780,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://qainsights.com/wp-content/uploads/2020/11/image-3.png" alt="Save as HAR" class="wp-image-7780"/><figcaption>Save as HAR</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Now back to VuGen, click on Record button and browse the saved HAR file using the below settings and then click on <strong>Start Recording</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":7781,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://qainsights.com/wp-content/uploads/2020/11/image-4.png" alt="Start Recording" class="wp-image-7781"/><figcaption>Recording using HAR</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:quote -->
<blockquote class="wp-block-quote"><p>swaggerApi.js will have all the operations from json. Generate DevWeb script either using HAR or Recording or Offline Generator.</p></blockquote>
<!-- /wp:quote -->

<!-- wp:paragraph -->
<p>This will analyze the traffic and generate respective <strong>Main</strong> file for <strong>getPetById</strong> as shown below.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>// This script was generated and reflects raw data. It is recommended to change this code to your required logic

const swaggerApi = require('./swaggerApi.js')(load);


load.initialize("Initialize", async function () {
});

load.action("Action", async function () {
    load.WebRequest.defaults.returnBody = false;
    load.WebRequest.defaults.headers = {
        "Accept": "application/json",
        "Accept-Encoding": "gzip, deflate, br",
        "Accept-Language": "en-US,en;q=0.5",
        "Connection": "keep-alive",
        "DNT": "1",
        "Referer": "https://petstore.swagger.io/",
        "TE": "Trailers",
        "User-Agent": "Mozilla/5.0 (Windows NT 10.0; rv:78.0) Gecko/20100101 Firefox/78.0"
    };

    let webRequest1 = swaggerApi.getPetById("12");
    const webResponse1 = await webRequest1.send();


});

load.finalize("Finalize", async function () {
});
</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>If all goes well, the replay will be successful as shown below.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":7782,"sizeSlug":"large"} -->
<figure class="wp-block-image size-large"><img src="https://qainsights.com/wp-content/uploads/2020/11/image-5.png" alt="Successful Replay" class="wp-image-7782"/><figcaption>Successful Replay</figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>By recording</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Now let us generate the <strong>getPetById </strong>request by recording. Click on <strong>Record </strong>button and configure as shown below and then click on <strong>Start Recording</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":7784,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://qainsights.com/wp-content/uploads/2020/11/image-7.png" alt="Start Recording" class="wp-image-7784"/><figcaption>Start Recording</figcaption></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>In the browser, just perform the <strong>getPetById </strong>request, once the recording is complete, go to <strong>Main</strong> to see the captured call.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>// This script was generated and reflects raw data. It is recommended to change this code to your required logic

const swaggerApi = require('./swaggerApi.js')(load);


load.initialize("Initialize", async function () {
});

load.action("Action", async function () {
    load.WebRequest.defaults.returnBody = false;
    load.WebRequest.defaults.headers = {
        "accept-encoding": "gzip, deflate, br",
        "accept-language": "en-US,en;q=0.9",
        "dnt": "1",
        "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.183 Safari/537.36"
    };

    const webResponse1 = new load.WebRequest({
        id: 1,
        url: "https://petstore.swagger.io/",
        method: "GET",
        headers: {
            "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9",
            "cache-control": "max-age=0",
            "sec-fetch-dest": "document",
            "sec-fetch-mode": "navigate",
            "sec-fetch-site": "none",
            "sec-fetch-user": "?1",
            "upgrade-insecure-requests": "1"
        },
        resources: &#91;
            "https://petstore.swagger.io/swagger-ui.css",
            "https://petstore.swagger.io/swagger-ui-bundle.js",
            "https://petstore.swagger.io/swagger-ui-standalone-preset.js",
            "https://petstore.swagger.io/favicon-32x32.png",
        ],
    }).sendSync();

    const webResponse2 = new load.WebRequest({
        id: 2,
        url: "https://petstore.swagger.io/v2/swagger.json",
        method: "GET",
        headers: {
            "accept": "application/json,*/*",
            "referer": "https://petstore.swagger.io/",
            "sec-fetch-dest": "empty",
            "sec-fetch-mode": "cors",
            "sec-fetch-site": "same-origin"
        },
    }).sendSync();

    let webRequest3 = swaggerApi.getPetById("14");
    const webResponse3 = await webRequest3.send();


});

load.finalize("Finalize", async function () {
});
</code></pre>
<!-- /wp:code -->

<!-- wp:heading -->
<h2>Using OfflineGenerator.exe</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Navigate to the LoadRunner installation location typically under <code>C:\Program Files (x86)\Micro Focus\Virtual User Generator\bin\DevWeb</code> and issue the below command to generate the script using the OfflineGenerator.exe program.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>OfflineGenerator.exe –mode=swagger -level=pages -har=&lt;path to har file> &lt;path or URL to swagger.json> &lt;path to result folder></code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>E.g.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>OfflineGenerator.exe -mode=swagger -level=pages -har="C:\Users\Downloads\petstore.swagger.io_Archive &#91;20-11-05 02-36-37].har" C:\Users\Downloads\petstore.json C:\Users\Documents\VuGen\Scripts\Swagger-Demo\</code></pre>
<!-- /wp:code -->

<!-- wp:heading -->
<h2>Conclusion:</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>DevWeb makes easy to test the API performance by leveraging Swagger specification. It expedites the process of creating scripts and helps in shift-left. Great power comes with great responsibility. After creating scripts, it is our responsibility&nbsp;to parameterize, handle errors, implement logic etc.</p>
<!-- /wp:paragraph -->