Below is the markup of the Track your Travel page (/items) of lab.becomeqa.com. It has two tables: Travel Destinations (id="countries-table") with 3 trips, and a small static table Items (id="items-table") with 2 rows.
Write an XPath expression that finds every trip row of the Travel Destinations table. A table row is a tr element.
No travel destinations added yet.... This row is not a trip: on such a page your XPath must find nothing.The interviewer asked for the number of rows. The trainer checks the elements your XPath finds, so return the rows themselves. In a test you get the number with count(...) around your XPath, or with locator.count() in Playwright.
Hidden tests check changed copies of the page: more trips, no trips, rows in a different order after sorting, other styling classes, the Items table placed above Travel Destinations. Base your XPath on an attribute that only trip rows have, for example a data test id, not on positions or styling classes.
An XPath starts with / or (.
<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">$4600</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>
</tbody>
</table>
</div>
</div>
<div class="table-section bg-white rounded-lg shadow-lg p-6 mb-8" id="items-table-section">
<h3 class="text-2xl font-bold text-gray-800 mb-4" data-test-id="items-section-title">Items</h3>
<table class="w-full table" id="items-table">
<thead class="bg-gray-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" id="header-id">ID</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" id="header-name" data-test-id="header-name">Name</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" id="header-category">Category</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" id="header-status" data-test-id="header-status">Status</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider" id="header-verified">Verified</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200" data-test-id="table-body">
<tr class="table-row even-row" id="row-1">
<td class="px-6 py-4 whitespace-nowrap cell cell-id" data-test-id="cell-id-1">1</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-name">Test Item 1</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-category">Category A</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-status" data-test-id="cell-status-1">Active</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-verified">
<input type="checkbox" class="h-4 w-4" checked="" disabled="">
</td>
</tr>
<tr class="table-row odd-row" id="row-2">
<td class="px-6 py-4 whitespace-nowrap cell cell-id" data-test-id="cell-id-2">2</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-name">Test Item 2</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-category">Category B</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-status" data-test-id="cell-status-2">Inactive</td>
<td class="px-6 py-4 whitespace-nowrap cell cell-verified">
<input type="checkbox" class="h-4 w-4" disabled="">
</td>
</tr>
</tbody>
</table>
</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.