Below is the markup of the /items page of lab.becomeqa.com. The Travel Destinations table has four trips: Paris, Tokyo, Rome and Lisbon. Every row ends with a Delete button.
Write an XPath that finds the Delete button in the row where the Destination cell is Paris.
Rules:
travel-row-17 and delete-btn-17. They change, so do not use the number in them.Paris: another trip can have a name that only contains it, such as Paris, Texas.The interviewer asked to use an axis: parent (or ..) or following-sibling (the cells of a row are siblings). The tests check only the result; keep to the rule yourself.
Hidden tests check changed copies of the page: rows in another order, a new id for Paris, a Paris, Texas row, another button in the Paris row.
The answer must be XPath: it starts with / or (.
Asked at Infosys · Source
<div id="root">
<div class="app" id="app">
<div class="min-h-screen bg-gray-100">
<header class="bg-blue-600 text-white p-4" id="main-header">
<nav class="container mx-auto flex justify-between items-center">
<div class="logo" data-test-id="logo">
<h1 class="text-2xl font-bold">QA Test Site</h1>
</div>
<div class="nav-links flex items-center space-x-4">
<a class="hover:underline nav-link" id="home-link" data-discover="true">Home</a>
<a class="hover:underline active-link" id="items-link" data-discover="true">Track your Travel</a>
<button class="bg-blue-500 hover:bg-blue-400 px-4 py-2 rounded transition-colors duration-200 login-button" id="login-btn" data-test-id="login-button">Login</button>
</div>
</nav>
</header>
<main class="container mx-auto p-6">
<div class="page-header" id="items-page-header" data-test-id="page-header">
<div class="header-content flex justify-end items-center mb-6">
<div class="action-buttons" data-test-id="action-buttons">
<button class="bg-green-500 text-white px-4 py-2 rounded mr-2 hover:bg-green-600 btn-create" id="create-item-btn">Add Travel Item</button>
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 btn-download" id="download-btn" data-test-id="download-button">Export Data</button>
</div>
</div>
</div>
<div class="table-section bg-white rounded-lg shadow-lg p-6 mb-8 border-l-4 border-blue-500" id="countries-table-section">
<div class="flex justify-between items-center mb-6">
<h3 class="text-2xl font-bold text-gray-800">Travel Destinations</h3>
<div class="total-cost bg-green-100 px-4 py-2 rounded-lg border-2 border-green-300">
<span class="text-sm font-medium text-green-700">Total Cost: </span>
<span class="text-xl font-bold text-green-800" id="total-cost" data-test-id="total-cost">$5300</span>
</div>
</div>
<div class="table-wrapper bg-white rounded-lg shadow">
<table class="w-full table" id="countries-table" data-test-id="countries-table">
<thead class="bg-blue-50 table-header">
<tr class="header-row">
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-blue-100 sortable-header select-none unsorted" id="header-destination" data-test-id="header-destination">
<div class="flex items-center">Destination</div>
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-blue-100 sortable-header select-none unsorted" id="header-travel-type">
<div class="flex items-center">Travel Type</div>
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-blue-100 sortable-header select-none unsorted" id="header-cost" data-test-id="header-cost">
<div class="flex items-center">Cost ($)</div>
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-blue-100 sortable-header select-none unsorted" id="header-status" data-test-id="header-status">
<div class="flex items-center">Status</div>
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-blue-100 sortable-header select-none unsorted" id="header-favorite">
<div class="flex items-center">Favorite</div>
</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider unsorted" id="header-actions">Actions</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200 table-body">
<tr class="table-row even-row hover:bg-gray-50" id="travel-row-17" data-test-id="travel-row-17">
<td class="px-6 py-4 whitespace-nowrap cell cell-destination">Paris</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-travel-type" data-test-id="cell-travel-type-17">Leisure</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-cost" data-test-id="cell-cost-17">1200</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-status" data-test-id="cell-status-17">
<select class="border border-gray-300 rounded px-2 py-1 text-sm" id="status-dropdown-17" data-test-id="status-dropdown-17">
<option value="Planned" selected="">Planned</option>
<option value="Completed">Completed</option>
<option value="Cancelled">Cancelled</option>
</select>
</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-favorite" data-test-id="cell-favorite-17">
<span class="px-2 py-1 rounded-full text-xs font-semibold bg-pink-100 text-pink-800">Yes</span>
</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-actions">
<button class="bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600" id="delete-btn-17" data-test-id="delete-button-17">Delete</button>
</td>
</tr>
<tr class="table-row odd-row hover:bg-gray-50" id="travel-row-23" data-test-id="travel-row-23">
<td class="px-6 py-4 whitespace-nowrap cell cell-destination">Tokyo</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-travel-type" data-test-id="cell-travel-type-23">Business</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-cost" data-test-id="cell-cost-23">2500</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-status" data-test-id="cell-status-23">
<select class="border border-gray-300 rounded px-2 py-1 text-sm" id="status-dropdown-23" data-test-id="status-dropdown-23">
<option value="Planned">Planned</option>
<option value="Completed" selected="">Completed</option>
<option value="Cancelled">Cancelled</option>
</select>
</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-favorite" data-test-id="cell-favorite-23">
<span class="px-2 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-800">No</span>
</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-actions">
<button class="bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600" id="delete-btn-23" data-test-id="delete-button-23">Delete</button>
</td>
</tr>
<tr class="table-row even-row hover:bg-gray-50" id="travel-row-31" data-test-id="travel-row-31">
<td class="px-6 py-4 whitespace-nowrap cell cell-destination">Rome</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-travel-type" data-test-id="cell-travel-type-31">Cultural</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-cost" data-test-id="cell-cost-31">900</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-status" data-test-id="cell-status-31">
<select class="border border-gray-300 rounded px-2 py-1 text-sm" id="status-dropdown-31" data-test-id="status-dropdown-31">
<option value="Planned" selected="">Planned</option>
<option value="Completed">Completed</option>
<option value="Cancelled">Cancelled</option>
</select>
</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-favorite" data-test-id="cell-favorite-31">
<span class="px-2 py-1 rounded-full text-xs font-semibold bg-pink-100 text-pink-800">Yes</span>
</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-actions">
<button class="bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600" id="delete-btn-31" data-test-id="delete-button-31">Delete</button>
</td>
</tr>
<tr class="table-row odd-row hover:bg-gray-50" id="travel-row-40" data-test-id="travel-row-40">
<td class="px-6 py-4 whitespace-nowrap cell cell-destination">Lisbon</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-travel-type" data-test-id="cell-travel-type-40">Adventure</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-cost" data-test-id="cell-cost-40">700</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-status" data-test-id="cell-status-40">
<select class="border border-gray-300 rounded px-2 py-1 text-sm" id="status-dropdown-40" data-test-id="status-dropdown-40">
<option value="Planned">Planned</option>
<option value="Completed">Completed</option>
<option value="Cancelled" selected="">Cancelled</option>
</select>
</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-favorite" data-test-id="cell-favorite-40">
<span class="px-2 py-1 rounded-full text-xs font-semibold bg-gray-100 text-gray-800">No</span>
</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-actions">
<button class="bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600" id="delete-btn-40" data-test-id="delete-button-40">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="separator-container my-8">
<div class="flex items-center">
<div class="flex-grow h-px bg-gradient-to-r from-transparent via-green-300 to-transparent"></div>
<div class="px-4 text-sm text-gray-500 font-medium bg-gray-100 rounded-full"></div>
<div class="flex-grow h-px bg-gradient-to-r from-transparent via-green-300 to-transparent"></div>
</div>
</div>
<div class="file-upload-section mb-8" id="file-upload-section" data-test-id="file-upload-section">
<div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-lg shadow-lg p-6 border-l-4 border-green-500">
<h3 class="text-2xl font-bold mb-4 text-center text-green-800">Upload Your Next Planned Trip</h3>
<p class="text-gray-700 text-center mb-6 text-sm font-medium">Upload a JSON file with your travel destinations to populate the table</p>
<div class="border-2 border-dashed rounded-lg p-8 text-center transition-all duration-300 border-green-300 hover:border-green-400 bg-white ">
<div class="mb-4">
<svg class="mx-auto h-16 w-16 text-green-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
<path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
<div class="mb-4">
<p class="text-lg font-semibold text-gray-900 mb-2">Drop your JSON file here</p>
<p class="text-sm text-gray-600">or click to browse files</p>
</div>
<input id="file-upload" class="hidden" accept=".json" data-test-id="file-upload-input" type="file">
<label for="file-upload" class="inline-flex items-center px-6 py-3 border-2 border-green-500 text-base font-semibold rounded-lg text-green-700 bg-green-50 hover:bg-green-100 cursor-pointer transition-all duration-200 hover:shadow-md transform hover:scale-105">Choose File</label>
</div>
<div class="mt-4 text-center">
<p class="text-xs text-gray-600 font-medium">Accepted: JSON files (.json)</p>
<p class="text-xs text-gray-500 mt-1">Format: Array with destination, travelType, status, and isFavorite fields</p>
</div>
</div>
</div>
<div class="separator-container my-8">
<div class="flex items-center">
<div class="flex-grow h-px bg-gradient-to-r from-transparent via-purple-300 to-transparent"></div>
<div class="px-4 text-sm text-gray-500 font-medium bg-gray-100 rounded-full"></div>
<div class="flex-grow h-px bg-gradient-to-r from-transparent via-purple-300 to-transparent"></div>
</div>
</div>
<div class="payment-section-wrapper mb-8 flex justify-center" id="payment-section" data-test-id="payment-section">
<div class="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-lg shadow-lg p-6 w-full max-w-2xl border-l-4 border-purple-500">
<h3 class="text-2xl font-bold mb-4 text-center text-purple-800">Next Trip Reservation</h3>
<p class="text-gray-700 text-center mb-6 text-sm font-medium">Book and pay for your next adventure with secure payment processing</p>
<div class="payment-iframe-container bg-white rounded-lg p-4 shadow-inner border border-purple-100"></div>
</div>
</div>
</main>
</div>
</div>
</div>Hidden tests run on Submit.