TestCafe操作求助：如何点击指定位置或随机索引的li元素

Hey there! I’ve got you covered for handling clicks on your 10 <li> elements in TestCafe. Let’s break down each scenario you need step by step:

1. Click the First <li> Element #

You can target the first item either by using the nth(0) method (TestCafe uses 0-based indexing) or the more readable .first() helper:

import { Selector } from 'testcafe';

fixture`List Item Interactions`
    .page`your-target-page-url`; // Replace with your actual page URL

test('Click the first list item', async t => {
    const allListItems = Selector('li');
    
    // Option 1: Use nth(0) for explicit indexing
    await t.click(allListItems.nth(0));
    
    // Option 2: Use .first() for cleaner code
    // await t.click(allListItems.first());
});

2. Click the Last <li> Element #

Similarly, you have two straightforward options here: use the .last() helper, or calculate the index based on the total number of items:

test('Click the last list item', async t => {
    const allListItems = Selector('li');
    
    // Option 1: Use .last() for simplicity
    await t.click(allListItems.last());
    
    // Option 2: Calculate the last index manually
    const totalItems = await allListItems.count;
    await t.click(allListItems.nth(totalItems - 1));
});

3. Click a Random <li> Element (Index 0-9) #

To pick a random item, generate a random integer between 0 and the total number of items minus 1, then target that index:

test('Click a random list item', async t => {
    const allListItems = Selector('li');
    const totalItems = await allListItems.count;
    
    // Generate a random index between 0 and totalItems - 1
    const randomIndex = Math.floor(Math.random() * totalItems);
    
    // Optional: Log the index to verify which item was clicked
    console.log(`Clicked list item at index: ${randomIndex}`);
    
    await t.click(allListItems.nth(randomIndex));
});

Quick Notes #

• If your <li> elements are dynamically loaded (e.g., fetched via API), make sure to wait for them to be present before interacting. Add a check like:

  await t.expect(allListItems.exists).ok();
  

• If some items might be hidden, add visibility checks using .with({ visibilityCheck: true }) to ensure TestCafe only targets visible elements:

  const visibleListItems = Selector('li').with({ visibilityCheck: true });
  

内容的提问来源于stack exchange，提问作者user3528466