how to locate the elements which only appear when mouse move to the specific spot in playwright?

Question

below is entire part

<div class="slc-item" label="2331356104545065455" label_color="#000000" label_name="渡辺もも" item="label_item_wrap">
    <u class="bg"></u>
    <i class="icon-labels il-default"></i>
    <span>渡辺もも</span>    
    <div class="side">
        <a href="javascript:void(0);" btn="edit_btn">
            <i class="icon-labels-opt ilo-edit"></i>
        </a>    
        <a href="javascript:void(0);" btn="del_btn">
            <i class="icon-labels-opt ilo-del"></i>
        </a>
        <div class="common-little-pop-wheat" 　undefined="" style="left: -30px; top: -40px; width: 52px; display: none;" id="undefined">
            <i class="arrow" style="left: 58px;"></i>
            <span style="color: #B06B0B; padding-left: 0px">delete</span>
        </div>
    </div>
</div>

I want click the 'recycle bin icon' to delete,but the icon only appear when mouse move to,and the the word(in red rectangle) in the right sentence from 'edit' turn to 'delete' .how can I locate the icon without using mouse.move(it is hard to get number of pixels)

Answer 1

page.hover(selector[, options])

After that you can do

page.waitForSlector(selector,{timeout:6000})

And then do what you need for your elem. You can read this:

https://playwright.dev/docs/api/class-page#page-hover