# Component Design for Web Service

Welcome to the Web Service Component Design. This guide will provide you with a detailed walkthrough of the component creation process for web services, from selecting the web section to creating test steps. Please follow the steps outlined below for a seamless experience.

***

### Navigating to Web Service Design

1. Begin by navigating to the Component Design section.
2. Click the **`Select`** button under the **Web section**. ![Design service page](https://1420569841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNZEZFJW017cw1ybAMHLs%2Fuploads%2Fgit-blob-eadc18e3fe32f47f00d885d47f2feeaa3a766ce4%2FDesign%20services.png?alt=media)

### Creating a New Component

1. After clicking the **`Select`** button, you will find the option to create a new component.
2. Click the **`Create Component`** button located on the left panel.
3. This action will open the Create Component form. ![Web design page](https://1420569841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNZEZFJW017cw1ybAMHLs%2Fuploads%2Fgit-blob-901eaaf9c833b01d2dddd8f643c929a3e6fe27ba%2FWeb%20design%20dashboard.png?alt=media)

### Designer View

As a designer, you'll have access to multiple tabs:

* **My Components**: Displays all created components.
* **Approved Components**: Shows components approved by reviewers.
* **Awaiting Approvals**: Presents components awaiting reviewer's approval.
* **Rejected Components**: Lists components declined by reviewers.
* **Draft Components**: Encompasses components created but not submitted for review. ![Designer](https://1420569841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNZEZFJW017cw1ybAMHLs%2Fuploads%2Fgit-blob-16291fe86ae45800d293ed43e109fbbeae336c2f%2Fdesigner.png?alt=media)

### Reviewer View

Reviewers will have a similar view, with the exception that 'Approved Components' and 'Rejected Components' are consolidated under the 'All Components' tab. Clicking **`Go To Component`** for awaiting components enables reviewers to approve or reject the component.

![Reviewer](https://1420569841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNZEZFJW017cw1ybAMHLs%2Fuploads%2Fgit-blob-0db6c0447640ef6ca7686d6ef2757c4b0575418a%2Freviewer.gif?alt=media)

**Note**: that Clicking on **`Create Project`** will open the same interface for both Designer and Reviewer as demonstrated in the [Quick Start](https://docs.qyrus.com/component-testing/quick_start_guide) section. And components created by the Reviewer will be automatically approved when clicked on **`Send For Approval`**.

### Creating a New Component (Continued)

1. Once you've navigated to the Create Component form, provide the following details:
   * Component Name
   * Module Name
   * Component Description
2. After completing the form, click the **`Create Component`** button.

![create component page](https://1420569841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNZEZFJW017cw1ybAMHLs%2Fuploads%2Fgit-blob-626a604f5765fce6577adc87a2d8a6b5eacca532%2FCreate%20component.png?alt=media)

### Adding Test Steps to the Component

1. After creating the component, you can begin adding test steps.
2. Click the **`Add Step`** button.

![add step page](https://1420569841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNZEZFJW017cw1ybAMHLs%2Fuploads%2Fgit-blob-b9b68b16dfa710dd5e6a4ef183cdcfeed66a62aa%2FAdd%20step.png?alt=media)

### Designing a Test Step

1. Upon clicking **`Add Step`**, you'll access the Test Step form.
2. Select an appropriate **Action type** for the step.
3. Fill in the mandatory fields.
4. To add more steps, use the **`Add Step`** button at the bottom.
5. Once all steps are defined, click the green **Save** icon at the top right to store your progress. ![Steps form page](https://1420569841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNZEZFJW017cw1ybAMHLs%2Fuploads%2Fgit-blob-5ee327e375d9f02100fcec99dfefb2d62a94a5cc%2FSteps%20form.png?alt=media)

### Additional Options on the Add Step Page

![Options page](https://1420569841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNZEZFJW017cw1ybAMHLs%2Fuploads%2Fgit-blob-b7e0e9bb9c6c42dadc3ca03bab31470061497f47%2FOptions.png?alt=media)

1. **`Add Steps`**: Clicking **`Add Step`** enables two buttons:
   * **`Pre Step`**: Add a step before the current one.
   * **`Post Step`**: Add a step after the current one.

![Options page](https://1420569841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNZEZFJW017cw1ybAMHLs%2Fuploads%2Fgit-blob-590237a08a3f0100215fab84fcdadfc1920ea564%2Fadd%20step%20buttons.png?alt=media)

2. **`Save`**: Store your progress.
3. **`Send For Approval`**: Submit your steps for approval by reviewers.
4. **`Quick Run`**: Initiate a Quick Run to validate the test before official approval.
   * Design your test steps.
   * Click the blue **`Play`** button for Quick Run.
   * Fill out the pop-up form.
   * Execute the Quick Run.

![Quick run page](https://1420569841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNZEZFJW017cw1ybAMHLs%2Fuploads%2Fgit-blob-595ae182c2353fccf54a1be82b0afcba4226e5f8%2FQuick%20run%20page.png?alt=media)

5. **Component Info**: Displays component details such as name, module, creation date, and description.
6. **Tests**: Shows where the component is used in tests. Update a component's steps, and navigate to tests from here.

   ![Run status](https://1420569841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNZEZFJW017cw1ybAMHLs%2Fuploads%2Fgit-blob-f4fdb64906e478036655a83b901dc3c7347a63f3%2FTest.png?alt=media)
7. **Runs**: View Quick Run status and click **`View`** for comprehensive details.

![Run status](https://1420569841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNZEZFJW017cw1ybAMHLs%2Fuploads%2Fgit-blob-3a75406f4ec87590801b5f1e6b74d966ca9f2a1b%2FRun%20status.png?alt=media)

#### Execution Summary Report

After clicking **`View`** in the Run Status, access an execution summary report. Additionally, a video recap and step-by-step screenshots are available for review. ![Report](https://1420569841-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNZEZFJW017cw1ybAMHLs%2Fuploads%2Fgit-blob-0ffc23e3e0852fc7c3a0fe68eff16b4ec7066654%2FReport%20page.png?alt=media)