# 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"
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://autokin.gitbook.io/docs/autokin-web/given-steps.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.