# 2. Annotation

1. ## Prepare a task

You need to prepare a web navigation task. Here is an example of "Find Dota 2 game and add all DLC to cart in steam"

2. ## Recording

*   Before recording, we can roughly estimate the process of operation:

    * _Open the Steam homepage_
    * _Search for dota2 in the search box._
    * _Enter the dota2 interface_
    * _Press the "add all DLC to cart" button on the dota2 interface_
    * _Task accomplished._


* Now, let's go!
* **Step 1:** is to open the steam homepage:https://store.steampowered.com/

<figure><img src="https://127034098-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ferav1ciJ1Zj7lRbkaCmD%2Fuploads%2F9npnhQfjGX3PACFbJpAQ%2Fimage.png?alt=media&#x26;token=bd9e28da-c83a-4de8-8936-d49b8c1e8a36" alt="" width="375"><figcaption></figcaption></figure>

* **Step 2:** Open the _**iMean builder**_ plugin and click the "create" button to create a workflow. (The plugin cannot be opened on a blank page, so you should first enter the website to click.)

<figure><img src="https://127034098-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ferav1ciJ1Zj7lRbkaCmD%2Fuploads%2FkHvl2EAuHKoM9s7G9BIW%2Fimage.png?alt=media&#x26;token=985f3df3-8391-4250-9bb2-c884d91bf52f" alt="" width="133"><figcaption></figcaption></figure>

* **Step 3:** Click on the search box. You will notice that the selected element is highlighted when the mouse hovers over it.

<figure><img src="https://127034098-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ferav1ciJ1Zj7lRbkaCmD%2Fuploads%2F58NPSWiqUb6nfOtTL2pA%2FV16%5D%7DNBEPHAAKM72%7B%24UOUJ0.png?alt=media&#x26;token=c894cc60-f78b-4c16-b482-8dba2d62d5b0" alt="" width="214"><figcaption></figcaption></figure>

* **Step 4:** Enter 'dota 2' and press the search button.

<figure><img src="https://127034098-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ferav1ciJ1Zj7lRbkaCmD%2Fuploads%2FLO8LOhQrRbjhUTEJCqnW%2F69%7D~2(%40_2%7DK%7B8R78UR~%5D8_E.png?alt=media&#x26;token=14fdbba7-e273-4d6c-a34f-166d54507ead" alt="" width="167"><figcaption></figcaption></figure>

* **Step 5:** Click on the 'dota 2' link to navigate to the 'dota 2' page.

<figure><img src="https://127034098-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ferav1ciJ1Zj7lRbkaCmD%2Fuploads%2FTlPfD6QzecldRkdkKMe7%2F_0FY%5D1U%24WRDP%5BYYKF_(F%7D%243.png?alt=media&#x26;token=3c7a2ca7-eefd-4d2a-9306-335b81ad21b2" alt="" width="375"><figcaption></figcaption></figure>

* **Step 6:** Enter the "dota 2" interface.

<figure><img src="https://127034098-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ferav1ciJ1Zj7lRbkaCmD%2Fuploads%2FM6CCcxwovxTY0HQb1gt8%2FJIE%60WO5OC%24)ZYF5WU(%60R%24KE.png?alt=media&#x26;token=4bac5587-71d6-4ddc-bc93-5b88dc9d094f" alt="" width="375"><figcaption></figcaption></figure>

* **Step 7:** Find the "Add all DLC button to cart" button and press it.

<figure><img src="https://127034098-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ferav1ciJ1Zj7lRbkaCmD%2Fuploads%2FLn8dCtVMOkkCBA2IEfmR%2Fimage.png?alt=media&#x26;token=3553188b-252e-43cb-8947-3f4d718599a1" alt="" width="375"><figcaption></figcaption></figure>

* **Step 8:** Task completed, click the green button on the left to stop recording.

<figure><img src="https://127034098-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ferav1ciJ1Zj7lRbkaCmD%2Fuploads%2FKDTF6lEihLsmYRjSvJvj%2F%40W5~GMCW_V%7DAFS%5B8NQV4P%7BA.png?alt=media&#x26;token=59320b81-6eb2-423e-a813-43d1eb5979e2" alt="" width="286"><figcaption></figcaption></figure>

* **Step 9:** After completion, it will automatically jump to the process editing interface, and enter the starting URL of the process.（The difference of public link and private link is whether the procedure needs user login）

<figure><img src="https://127034098-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ferav1ciJ1Zj7lRbkaCmD%2Fuploads%2FcTXrcdRQ1kr5kibZKtYQ%2FJ(%5D7I4_(EL%5B%60NE888)X6O6O.png?alt=media&#x26;token=54f9f854-a9dc-4f9d-bbe2-f19eb3fbb870" alt="" width="464"><figcaption></figcaption></figure>

<figure><img src="https://127034098-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ferav1ciJ1Zj7lRbkaCmD%2Fuploads%2FDjRiPTKLlcXDktQDFgXK%2FPDEIR%60_PAORS%25KPRDZB391Z.png?alt=media&#x26;token=16f0f66c-979b-4e1b-8086-7e09b8d54ea6" alt="" width="375"><figcaption></figcaption></figure>

* Then start annotating Key Nodes and Evaluation Functions. How to define key nodes and how to choose the match function can be seen in the next section.

3. Annotate Key Nodes and Evaluation Functions

Let's review this process .

* First of all, the web page of steam is a key node. To complete the task, you must enter the website. Here we choose Url included match.

<figure><img src="https://127034098-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ferav1ciJ1Zj7lRbkaCmD%2Fuploads%2FJ6u8Jk5sfMmssuMj2eEc%2Fimage.png?alt=media&#x26;token=d0c294c9-5b0f-4837-bdc7-01821e6321aa" alt="" width="375"><figcaption></figcaption></figure>

* The web page of the Dota 2 interface is a key node. Here we choose Url included match.

<figure><img src="https://127034098-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ferav1ciJ1Zj7lRbkaCmD%2Fuploads%2FrhzbmSAB9MmLQYCbNhv7%2Fimage.png?alt=media&#x26;token=072ef694-bbdb-4310-b9a4-39956f54a887" alt="" width="375"><figcaption></figcaption></figure>

* The third key node is to press the button, and we should use path exact match.

<figure><img src="https://127034098-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ferav1ciJ1Zj7lRbkaCmD%2Fuploads%2FgaoxgeYdQ7m9TgdEIHeB%2Fimage.png?alt=media&#x26;token=2c14128f-1dad-489e-ba7e-a50656c643a9" alt="" width="375"><figcaption></figcaption></figure>

* Click Save

<figure><img src="https://127034098-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Ferav1ciJ1Zj7lRbkaCmD%2Fuploads%2FTUOsMRLzxfu0FVOnchJl%2Fimage.png?alt=media&#x26;token=70f8e913-4498-4bcd-b90e-0f3fd3495d62" alt="" width="270"><figcaption></figcaption></figure>

For more information on how to define key nodes and evaluation functions, see [How to Define Key Nodes](2.-annotation/how-to-define-key-nodes-and-evaluation-functions).



For detailed documentation on iMean Builder, please refer to this [link](https://doc.imean.ai/introduction).
