}

.shadow {
  box-shadow: 5px 5px 10px #999;
}

/* Give space to lower icons so Gitter chat doesn't get on top of them */
.md-footer-meta {
  padding-bottom: 2em;
}

.user-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.user-list-center {
  justify-content: space-evenly;
}

.user {
  margin: 1em;
  min-width: 7em;
}

.user .avatar-wrapper {

```Python hl_lines="6"
{!../../../docs_src/path_operation_advanced_configuration/tutorial005.py!}
```

If you open the automatic API docs, your extension will show up at the bottom of the specific *path operation*.

<img src="/img/tutorial/path-operation-advanced-configuration/image01.png">

            <label>Token: <input type="text" id="token" autocomplete="off" value="some-key-token"/></label>
            <button onclick="connect(event)">Connect</button>
            <hr>
            <label>Message: <input type="text" id="messageText" autocomplete="off"/></label>
            <button>Send</button>
        </form>
        <ul id='messages'>
        </ul>
        <script>
        var ws = null;

    page = context.new_page()
    page.goto("http://localhost:8000/docs")
    page.get_by_text("GET/items/Read Items").click()
    page.get_by_role("tab", name="Schema").click()
    page.get_by_label("Schema").get_by_role("button", name="Expand all").click()
    page.screenshot(
        path="docs/en/docs/img/tutorial/separate-openapi-schemas/image03.png"
    )

    # ---------------------
    context.close()
    browser.close()

## Execution of dependencies with `yield`

The sequence of execution is more or less like this diagram. Time flows from top to bottom. And each column is one of the parts interacting or executing code.

```mermaid
sequenceDiagram

participant client as Client
participant handler as Exception handler
participant dep as Dep with yield

    page = context.new_page()
    page.goto("http://localhost:8000/docs")
    page.get_by_text("GET/items/Read Items").click()
    page.get_by_role("button", name="Try it out").click()
    page.get_by_role("button", name="Execute").click()
    page.screenshot(
        path="docs/en/docs/img/tutorial/separate-openapi-schemas/image02.png"
    )

    # ---------------------
    context.close()

You will see something like this:

<img src="/img/tutorial/security/image01.png">

!!! check "Authorize button!"
    You already have a shiny new "Authorize" button.

    And your *path operation* has a little lock in the top-right corner that you can click.

The sequence of execution before FastAPI 0.106.0 was like this diagram:

Time flows from top to bottom. And each column is one of the parts interacting or executing code.

```mermaid
sequenceDiagram

participant client as Client
participant handler as Exception handler
participant dep as Dep with yield

        <h1>WebSocket Chat</h1>
        <h2>Your ID: <span id="ws-id"></span></h2>
        <form action="" onsubmit="sendMessage(event)">
            <input type="text" id="messageText" autocomplete="off"/>
            <button>Send</button>
        </form>
        <ul id='messages'>
        </ul>
        <script>
            var client_id = Date.now()
            document.querySelector("#ws-id").textContent = client_id;

Il existe également plusieurs façons d'obtenir de l'aide.

## Star **FastAPI** sur GitHub

Vous pouvez "star" FastAPI dans GitHub (en cliquant sur le bouton étoile en haut à droite) : <a href="https://github.com/tiangolo/fastapi" class="external-link" target="_blank">https://github.com/tiangolo/fastapi</a>. ⭐️