> For the complete documentation index, see [llms.txt](https://autokin.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://autokin.gitbook.io/docs/autokin-web/given-steps.md).

# Given Steps

### Given that an application is hosted at `{url}` <a href="#given-that-an-application-is-hosted-at-url" id="given-that-an-application-is-hosted-at-url"></a>

```
Scenario: Autokin Web
    Given that an application is hosted at "https://www.autokinjs.com"
```

### &#x20;<a href="#given-that-i-reload-the-page" id="given-that-i-reload-the-page"></a>

### Given that I reload the page <a href="#given-that-i-reload-the-page" id="given-that-i-reload-the-page"></a>

Forces to reload the page

```
Scenario: Autokin Web
    Given that an application is hosted at "https://www.autokinjs.com"
    Given that I reload the page
```

### &#x20;<a href="#given-that-i-set-the-browser-window-size-to-width-and-height" id="given-that-i-set-the-browser-window-size-to-width-and-height"></a>

### Given that I set the browser window size to `{width}` and `{height}` <a href="#given-that-i-set-the-browser-window-size-to-width-and-height" id="given-that-i-set-the-browser-window-size-to-width-and-height"></a>

```
Scenario: Autokin Web
    Given that an application is hosted at "https://www.autokinjs.com"
    Given that I set the browser window size to "1200" and "800"

Scenario: Autokin Web
    Given that an application is hosted at "https://www.autokinjs.com"
    Given that I set the browser window size to 1200 and 800
```

### &#x20;<a href="#given-that-i-emulate-as-device-name-device" id="given-that-i-emulate-as-device-name-device"></a>

### Given that I emulate as `{device name}` device <a href="#given-that-i-emulate-as-device-name-device" id="given-that-i-emulate-as-device-name-device"></a>

```
Scenario: Autokin Web
    Given that an application is hosted at "https://www.autokinjs.com"
    Given that I set the browser window size to "1200" and "800"
    Given that I emulate as "iPad Pro" device
```

For device list, see [Supported Emulated Devices](https://www.autokinjs.com/docs/autokin-web/devices/)

### &#x20;<a href="#given-that-i-set-mode-to-mode-with-options" id="given-that-i-set-mode-to-mode-with-options"></a>

### Given that I set mode to `{mode}` with `{options}` <a href="#given-that-i-set-mode-to-mode-with-options" id="given-that-i-set-mode-to-mode-with-options"></a>

#### &#x20;<a href="#mobile-web-switch-mode" id="mobile-web-switch-mode"></a>

#### Mobile Web Switch Mode <a href="#mobile-web-switch-mode" id="mobile-web-switch-mode"></a>

To switch in `mobile` mode, option should be any of the [supported devices](https://www.autokinjs.com/docs/autokin-web/devices/).

```
Scenario: Autokin Web
    Given that an application is hosted at "https://www.autokinjs.com"
    Given that I set the browser window size to "1200" and "800"
    Given that I set mode to "mobile" with "iPad Pro"
```

#### &#x20;<a href="#desktop-switch-mode" id="desktop-switch-mode"></a>

#### Desktop Switch Mode <a href="#desktop-switch-mode" id="desktop-switch-mode"></a>

To use `desktop` mode, option should be `widht,height` format, see example below.

```
Scenario: Autokin Web
    Given that an application is hosted at "https://www.autokinjs.com"
    Given that I set the browser window size to "1200" and "800"
    Given that I set mode to "desktop" with "1200,800"
```

### &#x20;<a href="#mocking-or-intercepting-api-calls" id="mocking-or-intercepting-api-calls"></a>

### Mocking or Intercepting API Calls <a href="#mocking-or-intercepting-api-calls" id="mocking-or-intercepting-api-calls"></a>

#### &#x20;<a href="#given-that-i-mock-api-with" id="given-that-i-mock-api-with"></a>

#### Given that I mock API with <a href="#given-that-i-mock-api-with" id="given-that-i-mock-api-with"></a>

This can be used if you are mocking API calls within the web application and would expect that the API responding with JSON format.

````
Scenario: Autokin Web
    Given that an application is hosted at "https://www.autokinjs.com"
    Given that I set the browser window size to "1200" and "800"
    Given that I mock API with
    ```
    {
        "method": "GET",
        "url": "/hello-world",
        "status": 200,
        "body": {
            "message": "hello"
        }
    }
    ```
````

#### &#x20;<a href="#given-that-i-mock-url-with" id="given-that-i-mock-url-with"></a>

#### Given that I mock URL with <a href="#given-that-i-mock-url-with" id="given-that-i-mock-url-with"></a>

This can be used if you are mocking loading of images.

````
Scenario: Autokin Web
    Given that an application is hosted at "https://www.autokinjs.com"
    Given that I set the browser window size to "1200" and "800"
    Given that I mock URL with
    ```
    {
        "method": "GET",
        "url": "/images/logo.png",
        "status": 200,
        "image": "./folder/mocked-image.png"
    }
    ```
````

If there is a loading of image during the web application processing, we can mock it. In the above example, if `logo.png` is retrieve, instead of getting from the source location, we will intercept and replace that image with file specified in `image` attribute.

#### &#x20;<a href="#given-that-i-mock-api-with-json-file" id="given-that-i-mock-api-with-json-file"></a>

#### Given that I mock API with `{json file}` <a href="#given-that-i-mock-api-with-json-file" id="given-that-i-mock-api-with-json-file"></a>

We can also have pre-written mock definition in file, and we can reference using this step

```
Scenario: Autokin Web
    Given that an application is hosted at "https://www.autokinjs.com"
    Given that I set the browser window size to "1200" and "800"
    Given that I mock API with "./mocks/login.json"
```