How to use Relative Selector in Shirates - Part 3 -
Published: 2022-10-20 21:50:40

This article is an introduction of how to use [Shirates](https://dev.to/wave1008/introducing-shirates-a-mobile-testing-automation-tool-3nmc), a mobile testing automation tool.

## Selector expression
You can use **selector expression** for selecting an element in the screen. This is simple and powerful expression(See [How to use selector expression in Shirates](https://dev.to/wave1008/how-to-use-selector-expression-in-shirates-2po4)).

## Relative selector
Once you selected an element on the screen, you might want to get another element around the element relatively. In this case, you can use Shirates's **relative selector**.

----

## Relative selector(XML based)
You can get an element relatively along with hierarichical structure of XML.

## Relative selectors

| relative selector | description             |
|:------------------|:------------------------|
| :parent           | parent element          |
| :child            | child element           |
| :sibling          | sibling element         |
| :ancestor         | ancestor element        |
| :descendant       | descendant element      |
| :next             | next element            |
| :previous         | previous element        |
| :nextLabel        | next label element      |
| :preLabel         | previous label element  |
| :nextInput        | next input element      |
| :preInput         | previous input element  |
| :nextImage        | next image element      |
| :preImage         | previous image element  |
| :nextButton       | next button element     |
| :preButton        | previous button element |
| :nextSwitch       | next switch element     |
| :preSwitch        | previous switch element |

## Relative selector examples

| example                 | description                                                                                                                         |
|:------------------------|:------------------------------------------------------------------------------------------------------------------------------------|
| `<.class1>:child(1)`    | Select the first element that type is class1, then select the first child.                                                          |
| `<#id1>:next`           | Select the first element that resource-id is "id1", then select next element.                                                       |
| `<text1>:previous`      | Select the first element that text is "text1", then select previous element.                                                        |
| `<@access1>:next:next`  | Select the first element that accessibility(content-desc or name) is "access1", then select next element, then select next element. |
| `<@access1>:next(2)`    | This is equivalent to `<@access1>:next:next`                                                                                        |
| `<text1>:next(.class1)` | Select the first element that text is "text1", then select next element that class is "class1"                                      |
| `<text1>:nextInput`     | Select the first element that text is "text1", then select next input element.                                                      |


## Material
You can get complete sample project from [https://github.com/wave1008/shirates-samples-selectors].

### SelectWithXmlTest
```kotlin
import org.junit.jupiter.api.Order
import org.junit.jupiter.api.Test
import shirates.core.driver.commandextension.classIs
import shirates.core.driver.commandextension.restartApp
import shirates.core.driver.commandextension.select
import shirates.core.testcode.UITest

class SelectWithXmlTest : UITest() {

    @Test
    @Order(10)
    fun selectWithXml() {

        scenario {
            case(1) {
                condition {
                    it.restartApp()
                }.expectation {
                    it.select("Network & internet") {
                        select(":next").classIs("android.widget.TextView")
                        select(":next(2)").classIs("android.widget.LinearLayout")
                        select(":next(3)").classIs("android.widget.LinearLayout")
                        select(":next(4)").classIs("android.widget.ImageView")
                        select(":next(5)").classIs("android.widget.RelativeLayout")
                        select(":next(6)").classIs("android.widget.TextView")
                        select(":next(7)").classIs("android.widget.TextView")
                    }
                }
            }
        }
    }

}
```


![XML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/umlvtz1gks029zr2ykui.png)


![Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gzuejo1ah8n6f7qnhpg9.png)


---

## For more information
See [Relative selector(XML based)](https://github.com/ldi-github/shirates-core/blob/main/doc/markdown/basic/selector_and_nickname/relative_selector/relative_selector_xml.md)

---

## Conclusion
Once you selected an element on the screen, you can get another element around the element relatively using Shirates's **relative selector**.

You can get an element relatively along with hierarichical　structure of XML.