Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/rezapace/parent-axes

Parent-Axes
https://github.com/rezapace/parent-axes

Last synced: 12 months ago
JSON representation

Parent-Axes

Awesome Lists containing this project

README 

          
# ๐ŸŽฏ XPath Generator - Preceding/Following Specialist



## ๐Ÿ“– Deskripsi



XPath Generator adalah aplikasi web canggih yang dirancang khusus untuk menghasilkan pattern XPath yang fokus pada navigasi **Preceding** dan **Following** untuk testing iOS dan Android. Aplikasi ini sangat berguna untuk automation testing yang memerlukan navigasi element berdasarkan posisi relatif dalam DOM structure.



## ๐ŸŽฌ Demo



![XPath Generator Demo](doc/demo.gif)



*Demo penggunaan XPath Generator untuk menganalisis XML dan menghasilkan pattern navigation*



## โœจ Fitur Utama



- ๐Ÿ” **XML Analysis**: Parsing dan analisis struktur XML secara mendalam

- ๐ŸŽฏ **Advanced Pattern Generation**: Menghasilkan berbagai pattern XPath dengan confidence rating

- ๐Ÿ“ฑ **iOS/Android Support**: Konversi otomatis ke Groovy constants untuk testing framework

- ๐Ÿ“Š **Statistics & Analytics**: Laporan statistik lengkap tentang struktur XML

- ๐ŸŽจ **Modern UI**: Interface yang responsive dan user-friendly

- ๐Ÿ“‹ **Copy to Clipboard**: One-click copy untuk semua pattern yang dihasilkan



## ๐Ÿš€ Cara Menjalankan



```bash

# Clone repository

git clone 

cd precidingsiblinggenerator



# Build aplikasi

go build -o xpath_generator main.go



# Jalankan aplikasi

./xpath_generator

```



Aplikasi akan berjalan di `http://localhost:8080`



## ๐Ÿ“š Pattern XPath Navigation



### 1. ๐Ÿ”™ **Preceding**



**Preceding** mengacu pada semua element yang muncul **sebelum** element saat ini dalam document order (urutan dokumen).



#### Karakteristik:

- Mencakup semua element yang telah diproses sebelum element target

- Tidak terbatas pada sibling, tetapi seluruh dokumen

- Urutan berdasarkan document order, bukan tree hierarchy



#### Contoh Pattern:

```xpath

// Basic preceding

${element.xpath}/preceding::*[1]



// Preceding by type

${element.xpath}/preceding::XCUIElementTypeButton[1]



// Preceding with condition

${element.xpath}/preceding::*[@name='Login'][1]

```



#### Use Cases:

- โœ… Mencari label atau instruksi yang muncul sebelum form field

- โœ… Navigasi ke element yang sudah diproses sebelumnya

- โœ… Validasi sequence dalam workflow



#### ๐ŸŽฏ Kapan Menggunakan Preceding:

- **Form Validation**: Ketika perlu mencari error message yang muncul sebelum input field

- **Navigation Flow**: Untuk kembali ke step sebelumnya dalam multi-step form

- **Context Reference**: Mencari heading atau label yang memberikan context untuk element saat ini

- **Sequential Testing**: Validasi bahwa element muncul dalam urutan yang benar



**Contoh Real Case**: 

```groovy

// Mencari error message yang muncul sebelum password field

def errorMsg = driver.findElement(By.xpath("${passwordField.xpath}/preceding::*[contains(text(),'Password required')][1]"))

```



---



### 2. โฌ…๏ธ **Preceding Sibling**



**Preceding Sibling** mengacu pada element yang memiliki **parent yang sama** dan muncul **sebelum** element saat ini.



#### Karakteristik:

- Hanya element dengan parent yang sama (sibling)

- Lebih spesifik dan terbatas dibanding preceding

- Ideal untuk navigasi dalam container yang sama



#### Contoh Pattern:

```xpath

// Immediate preceding sibling

${element.xpath}/preceding-sibling::*[1]



// Preceding sibling by type

${element.xpath}/preceding-sibling::XCUIElementTypeTextField[1]



// All preceding siblings

${element.xpath}/preceding-sibling::*

```



#### Use Cases:

- โœ… Navigasi antar field dalam form yang sama

- โœ… Mencari element sebelumnya dalam list atau menu

- โœ… Validasi urutan element dalam container



#### ๐ŸŽฏ Kapan Menggunakan Preceding Sibling:

- **Form Navigation**: Berpindah dari field saat ini ke field sebelumnya dalam form

- **List Item Selection**: Memilih item sebelumnya dalam list atau menu dropdown

- **Tab Navigation**: Navigasi ke tab sebelumnya dalam tab container

- **Button Grouping**: Mencari tombol yang berdekatan dalam button group



**Contoh Real Case**:

```groovy

// Klik tombol "Previous" yang berada sebelum tombol "Next"

def previousBtn = driver.findElement(By.xpath("${nextButton.xpath}/preceding-sibling::*[contains(@name,'Previous')][1]"))

previousBtn.click()

```



#### ๐Ÿ”ง Perbedaan Preceding vs Preceding Sibling:

| Aspect | Preceding | Preceding Sibling |

|--------|-----------|-------------------|

| **Scope** | Seluruh dokumen | Hanya sibling dalam parent yang sama |

| **Performance** | Lebih lambat | Lebih cepat |

| **Precision** | Lebih luas | Lebih spesifik |

| **Use Case** | Cross-container navigation | Same-container navigation |



---



### 3. ๐Ÿ”œ **Following**



**Following** mengacu pada semua element yang muncul **setelah** element saat ini dalam document order.



#### Karakteristik:

- Mencakup semua element yang akan diproses setelah element target

- Tidak terbatas pada sibling, tetapi seluruh dokumen

- Berguna untuk navigasi forward dalam workflow



#### Contoh Pattern:

```xpath

// Basic following

${element.xpath}/following::*[1]



// Following by type

${element.xpath}/following::XCUIElementTypeButton[1]



// Following with condition

${element.xpath}/following::*[text()='Submit'][1]

```



#### Use Cases:

- โœ… Navigasi ke step selanjutnya dalam wizard

- โœ… Mencari element konfirmasi setelah input

- โœ… Validasi element yang muncul setelah action



#### ๐ŸŽฏ Kapan Menggunakan Following:

- **Wizard Navigation**: Melanjutkan ke step berikutnya setelah mengisi form

- **Confirmation Check**: Mencari pesan konfirmasi yang muncul setelah submit

- **Dynamic Content**: Menunggu element yang muncul setelah loading atau action

- **Validation Messages**: Mencari success/error message yang muncul setelah form submission



**Contoh Real Case**:

```groovy

// Mencari success message yang muncul setelah login form

def successMsg = driver.findElement(By.xpath("${loginForm.xpath}/following::*[contains(text(),'Login successful')][1]"))

assert successMsg.isDisplayed()

```



---



### 4. โžก๏ธ **Following Sibling**



**Following Sibling** mengacu pada element yang memiliki **parent yang sama** dan muncul **setelah** element saat ini.



#### Karakteristik:

- Hanya element dengan parent yang sama (sibling)

- Lebih spesifik dan terbatas dibanding following

- Ideal untuk navigasi sequential dalam container



#### Contoh Pattern:

```xpath

// Immediate following sibling

${element.xpath}/following-sibling::*[1]



// Following sibling by type

${element.xpath}/following-sibling::XCUIElementTypeButton[1]



// All following siblings

${element.xpath}/following-sibling::*

```



#### Use Cases:

- โœ… Navigasi ke field berikutnya dalam form

- โœ… Mencari tombol action setelah input field

- โœ… Validasi sequence dalam list item



#### ๐ŸŽฏ Kapan Menggunakan Following Sibling:

- **Sequential Form Filling**: Berpindah ke field berikutnya setelah mengisi field saat ini

- **Action Button Location**: Mencari tombol submit/save yang berada setelah input field

- **List Navigation**: Navigasi ke item berikutnya dalam list yang sama

- **Related Controls**: Mencari control yang berhubungan langsung (checkbox setelah label)



**Contoh Real Case**:

```groovy

// Setelah mengisi username, lanjut ke password field

def passwordField = driver.findElement(By.xpath("${usernameField.xpath}/following-sibling::*[@type='password'][1]"))

passwordField.sendKeys("mypassword")

```



#### ๐Ÿ”ง Perbedaan Following vs Following Sibling:

| Aspect | Following | Following Sibling |

|--------|-----------|-------------------|

| **Timing** | Setelah action/loading | Immediate navigation |

| **Context** | Document-wide search | Container-specific |

| **Reliability** | Depends on timing | More predictable |

| **Speed** | Slower (broader search) | Faster (limited scope) |



---



### 5. ๐ŸŽฏ **Last**



**Last** mengacu pada element **terakhir** dari jenis tertentu dalam dokumen atau context tertentu.



#### Karakteristik:

- Menggunakan XPath function `last()`

- Berguna untuk menemukan element final dalam list

- Dapat dikombinasikan dengan condition untuk specificity



#### Contoh Pattern:

```xpath

// Last element of type

(//${IOS_TYPE_BUTTON})[last()]



// Last with condition

(//${IOS_TYPE_CELL}[@name='Item'])[last()]



// Last in parent context

(${parent.xpath}/${IOS_TYPE_TEXTFIELD})[last()]

```



#### Use Cases:

- โœ… Scroll ke item terakhir dalam list

- โœ… Navigasi ke footer element

- โœ… Validasi element terakhir yang ditambahkan



#### ๐ŸŽฏ Kapan Menggunakan Last:

- **List Operations**: Scroll ke bottom untuk melihat item terbaru atau terakhir

- **Data Validation**: Memverifikasi bahwa item baru ditambahkan di akhir list

- **Navigation to End**: Langsung ke element terakhir tanpa iterasi

- **Form Completion**: Mencari tombol submit yang biasanya di akhir form



**Contoh Real Case**:

```groovy

// Scroll ke item terakhir dalam shopping cart untuk melihat total

def lastItem = driver.findElement(By.xpath("(//XCUIElementTypeCell)[last()]"))

def totalPrice = driver.findElement(By.xpath("(//XCUIElementTypeStaticText[contains(@name,'Total')])[last()]"))

```



#### ๐ŸŽฏ Advanced Last Pattern Usage:

- **`[last()]`**: Element terakhir dari type tertentu

- **`[last()-1]`**: Element kedua dari akhir  

- **`[position()=last()]`**: Sama dengan `[last()]` tapi lebih eksplisit

- **`[last()][contains(@name,'Submit')]`**: Element terakhir dengan kondisi tertentu



**Performance Tips**:

- โœ… `last()` lebih cepat dari iterasi manual

- โœ… Kombinasikan dengan type selector untuk precision

- โœ… Gunakan parent context untuk scope yang lebih sempit



---



---



## ๐ŸŽฏ Decision Matrix: Kapan Menggunakan Pattern Mana?



### ๐Ÿ“Š Quick Reference Guide



| Scenario | Pattern | Why | Example |

|----------|---------|-----|---------|

| **Form field โ†’ next field** | Following Sibling | Same container, predictable | Username โ†’ Password |

| **Form field โ†’ previous field** | Preceding Sibling | Same container, rollback | Password โ†’ Username |

| **After submit โ†’ success message** | Following | Cross-container, timing-based | Form โ†’ Confirmation |

| **Error state โ†’ related field** | Preceding | Context lookup | Error โ†’ Input field |

| **Navigate to end of list** | Last | Direct access, no iteration | โ†’ Bottom item |



### ๐Ÿšฆ Decision Tree



```

Need to navigate from current element?

โ”‚

โ”œโ”€ YES โ†’ Where to go?

โ”‚   โ”‚

โ”‚   โ”œโ”€ Same container (parent)?

โ”‚   โ”‚   โ”œโ”€ Previous element โ†’ Use PRECEDING SIBLING

โ”‚   โ”‚   โ””โ”€ Next element โ†’ Use FOLLOWING SIBLING

โ”‚   โ”‚

โ”‚   โ”œโ”€ Different container?

โ”‚   โ”‚   โ”œโ”€ Before current โ†’ Use PRECEDING  

โ”‚   โ”‚   โ””โ”€ After current โ†’ Use FOLLOWING

โ”‚   โ”‚

โ”‚   โ””โ”€ Final element of type?

โ”‚       โ””โ”€ Use LAST

โ”‚

โ””โ”€ NO โ†’ Use standard locator patterns

```



### โšก Performance Comparison



| Pattern | Speed | Reliability | Scope | Best For |

|---------|-------|-------------|-------|----------|

| **Preceding Sibling** | โšกโšกโšกโšกโšก | โญโญโญโญโญ | Narrow | Form navigation |

| **Following Sibling** | โšกโšกโšกโšกโšก | โญโญโญโญโญ | Narrow | Sequential flow |

| **Preceding** | โšกโšกโšก | โญโญโญ | Wide | Context lookup |

| **Following** | โšกโšกโšก | โญโญโญ | Wide | Result validation |

| **Last** | โšกโšกโšกโšก | โญโญโญโญ | Targeted | End navigation |



## ๐Ÿ”„ Pattern Advanced



### Relative Patterns

Pattern yang menggunakan context relationship:

- **Parent-Child**: `${parent.xpath}/XCUIElementTypeButton`

- **Depth-based**: `//*[@depth='3']/XCUIElementTypeCell`

- **Index-based**: `(//XCUIElementTypeButton)[2]`



### Conditional Patterns

Pattern dengan kondisi spesifik:

- **Contains**: `//XCUIElementTypeButton[contains(@name, 'Save')]`

- **Starts-with**: `//XCUIElementTypeTextField[starts-with(@name, 'Input')]`

- **Position**: `//XCUIElementTypeCell[position()=2]`



## ๐Ÿ“ฑ iOS Testing Integration



Aplikasi ini secara otomatis mengkonversi element type ke Groovy constants:



```groovy

// iOS Element Types

XCUIElementTypeButton โ†’ ${Constants.IOS_TYPE_BUTTON}

XCUIElementTypeTextField โ†’ ${Constants.IOS_TYPE_TEXTFIELD}

XCUIElementTypeStaticText โ†’ ${Constants.IOS_TYPE_STATIC_TEXT}



// iOS Attributes

@name โ†’ @${Constants.IOS_ATTR_NAME}

@label โ†’ @${Constants.IOS_ATTR_LABEL}

@value โ†’ @${Constants.IOS_ATTR_VALUE}

```



## ๐Ÿ’ก Real-World Testing Examples



### ๐Ÿ” Login Form Automation

```groovy

// Test flow: Username โ†’ Password โ†’ Login Button โ†’ Success Message

class LoginTest {

    def testLoginFlow() {

        // Fill username

        def usernameField = findElement("//XCUIElementTypeTextField[@name='username']")

        usernameField.sendKeys("testuser")

        

        // Navigate to password (following sibling)

        def passwordField = findElement("${usernameField.xpath}/following-sibling::XCUIElementTypeSecureTextField[1]")

        passwordField.sendKeys("password123")

        

        // Find login button (following sibling)

        def loginBtn = findElement("${passwordField.xpath}/following-sibling::XCUIElementTypeButton[1]")

        loginBtn.click()

        

        // Verify success message (following - cross container)

        def successMsg = findElement("${loginBtn.xpath}/following::*[contains(@name,'Welcome')][1]")

        assert successMsg.isDisplayed()

    }

}

```



### ๐Ÿ›’ Shopping Cart Operations

```groovy

// Navigate through cart items and validate total

class CartTest {

    def testCartTotal() {

        // Add items to cart first...

        

        // Navigate to last item to see total

        def lastCartItem = findElement("(//XCUIElementTypeCell[contains(@name,'cart-item')])[last()]")

        

        // Find total price (following the last item)

        def totalPrice = findElement("${lastCartItem.xpath}/following::*[contains(@name,'Total')][1]")

        

        // Validate total is correct

        assert totalPrice.text.contains("$99.99")

    }

}

```



### ๐Ÿ“‹ Form Validation Testing

```groovy

// Test form validation messages

class FormValidationTest {

    def testFieldValidation() {

        def emailField = findElement("//XCUIElementTypeTextField[@name='email']")

        emailField.sendKeys("invalid-email")

        

        // Trigger validation

        def submitBtn = findElement("//XCUIElementTypeButton[@name='submit']")

        submitBtn.click()

        

        // Find error message (typically appears after the field)

        def errorMsg = findElement("${emailField.xpath}/following::*[contains(@name,'Invalid email')][1]")

        assert errorMsg.isDisplayed()

        

        // Or find error icon (typically preceding the field)

        def errorIcon = findElement("${emailField.xpath}/preceding-sibling::*[@name='error-icon'][1]")

        assert errorIcon.isDisplayed()

    }

}

```



## ๐Ÿค– Android Testing Integration



Support untuk Android element types:



```groovy

// Android Element Types

android.widget.Button โ†’ ${Constants.ANDROID_TYPE_BUTTON}

android.widget.TextView โ†’ ${Constants.ANDROID_TYPE_TEXTVIEW}

android.widget.EditText โ†’ ${Constants.ANDROID_TYPE_EDITTEXT}



// Android Attributes

@text โ†’ @${Constants.ANDROID_ATTR_TEXT}

@content-desc โ†’ @${Constants.ANDROID_ATTR_CONTENT_DESC}

@resource-id โ†’ @${Constants.ANDROID_ATTR_RESOURCE_ID}

```



## ๐Ÿ“Š Confidence Rating System



Setiap pattern dilengkapi dengan confidence rating (1-5 stars):



- โญ **1 Star**: Pattern umum, mungkin tidak stabil

- โญโญ **2 Stars**: Pattern cukup reliable

- โญโญโญ **3 Stars**: Pattern good, recommended untuk use case tertentu

- โญโญโญโญ **4 Stars**: Pattern very reliable, highly recommended

- โญโญโญโญโญ **5 Stars**: Pattern excellent, sangat stabil dan unique



## ๐ŸŽจ UI Features



### Home Page

- ๐Ÿ“Š **Statistics Dashboard**: Total elements, patterns generated, depth analysis

- ๐Ÿ“ **XML Input**: Paste dan analyze XML content

- ๐Ÿท๏ธ **Element Cards**: Preview semua element dengan attributes



### Analysis Page

- ๐Ÿ” **Element Details**: Informasi lengkap element yang dipilih

- ๐Ÿ“‹ **Pattern Categories**: Grouped by pattern type dengan color coding

- ๐Ÿ’ก **Use Cases**: Penjelasan kapan menggunakan setiap pattern

- ๐Ÿท๏ธ **Test Object ID**: Suggested variable names untuk automation

- ๐Ÿ“‹ **One-Click Copy**: Copy pattern ke clipboard dengan hover effect



### Responsive Design

- ๐Ÿ“ฑ **Mobile Friendly**: Layout responsif untuk semua device

- ๐ŸŽจ **Modern Styling**: Gradient backgrounds, hover effects, animations

- ๐Ÿ“œ **Horizontal Scroll**: Auto scroll untuk pattern yang panjang

- ๐ŸŽฏ **Visual Indicators**: Color-coded patterns dan confidence badges



## ๐Ÿ› ๏ธ Technical Stack



- **Backend**: Go (Golang) dengan standard library

- **Frontend**: HTML5, CSS3, Vanilla JavaScript

- **XML Processing**: Go xml package dengan custom parsing

- **Template Engine**: Go html/template

- **HTTP Server**: Go net/http



## ๐Ÿ“ Struktur Project



```

precidingsiblinggenerator/

โ”œโ”€โ”€ main.go              # Main application file

โ”œโ”€โ”€ go.mod              # Go module definition

โ”œโ”€โ”€ README.md           # Documentation

โ”œโ”€โ”€ rule.md             # iOS constants reference

โ””โ”€โ”€ xmlfiles/           # Sample XML files

    โ”œโ”€โ”€ login_2025-07-16_16-08-31_060030.xml

    โ””โ”€โ”€ sample_ios.xml

```



## ๐Ÿ”ง Development



### Prerequisites

- Go 1.23.6 atau lebih baru

- Browser modern (Chrome, Firefox, Safari, Edge)



### Build & Run

```bash

# Development mode

go run main.go



# Production build

go build -o xpath_generator main.go

./xpath_generator

```



## ๏ฟฝ Troubleshooting & Best Practices



### โŒ Common Issues & Solutions



| Issue | Problem | Solution |

|-------|---------|----------|

| **Element not found** | Pattern too specific | Use broader pattern (preceding vs preceding-sibling) |

| **Multiple matches** | Pattern too generic | Add more specific conditions |

| **Timing issues** | Element not loaded yet | Use explicit waits with following patterns |

| **Performance slow** | Using preceding/following extensively | Prefer sibling patterns when possible |



### โœ… Best Practices



#### ๐ŸŽฏ Pattern Selection Strategy

1. **Start Narrow**: Use sibling patterns first (faster, more reliable)

2. **Expand Scope**: Use preceding/following if sibling doesn't work

3. **Add Conditions**: Use attributes to make patterns more specific

4. **Test Stability**: Verify patterns work across different data sets



#### ๐Ÿš€ Performance Optimization

```groovy

// โŒ Slow - searches entire document

def element = findElement("//XCUIElementTypeButton/following::*[contains(@name,'Submit')]")



// โœ… Fast - limited scope

def element = findElement("${formContainer.xpath}//XCUIElementTypeButton/following-sibling::*[contains(@name,'Submit')]")

```



#### ๐Ÿ” Debugging Tips

1. **Use Browser Dev Tools**: Test XPath patterns in browser console

2. **Start Simple**: Begin with basic patterns, add complexity gradually

3. **Check Parent Context**: Ensure you're in the right container

4. **Validate Data**: Test with different data sets and UI states



## ๏ฟฝ๐Ÿ“š Referensi



- [XPath Specification](https://www.w3.org/TR/xpath/)

- [XCUITest Documentation](https://developer.apple.com/documentation/xctest)

- [UI Automator Documentation](https://developer.android.com/training/testing/ui-automator)



## ๐Ÿค Contributing



Contributions welcome! Please read the contributing guidelines and submit pull requests untuk improvements.



## ๐Ÿ“„ License



This project is licensed under the MIT License - see the LICENSE file for details.



## ๐Ÿ“น Demo Video



Untuk melihat aplikasi dalam action, check out `demo.gif` yang menampilkan:

- โœ… XML input dan parsing

- โœ… Element selection dan analysis

- โœ… Pattern generation dengan confidence ratings

- โœ… Copy-to-clipboard functionality

- โœ… Responsive design di berbagai ukuran layar



> **Note**: `demo.gif` file harus dibuat dengan screen recording dari aplikasi yang sedang berjalan untuk memberikan gambaran visual yang lengkap kepada users.



---



**Dibuat dengan โค๏ธ untuk iOS & Android Test Automation**