How to handle multiple elements with the same class in laravel dusk

Question

In my dusk test I want to firstly add and then delete news. Each news has .delete-news class but on the screen I have multiple elements. Each .delete-news class has in it's path data attribute with it's id data-newsid="id". Now the browser does not know which delete-news class it should to click. How should I manage that?

Probably I should take delete-news class with the biggest data-newsid attribute. But I don't know how I should check it.

Currently I'm deleting it like this:

public function testRemoveNews() {
    $this->browse(function ($browser) {
        $browser->visit('/')
                ->press('.delete_news')
                ->press('Yes')
                ->waitForText('News has been deleted!')
                ->press('OK')
                ->assertDontSee('Title of the news');
    });
}

Answer 1

If you sorting your news by 'id' desc, maybe you should try

->press('.delete-news:first') // or :nth-child(1)

or add a dusk attribute to first news element, like dusk="last-news", and call it with:

->press('@last-news')