Robot Framework --> SeleniumLibrary

Question

Hi I am trying to write the code to click on this edit img, I am new at this and I am not sure how to do it. I tried using the Click button, Click Image, Click Element but since this img doesn't have any id, name or str, it's a bit challenging. Any help would be appreciated. Please look at the screenshot of the code attached. HTML Code

The picture of the img

Answer 1

I'm not 100% sure this will work but you could try using xpath. In your case it would be something like this:

Click Element    xpath=//span[@class="mat-button-wrapper"]/mat-icon

There's a lot possible with xpaths. You could take a look at this cheatsheet for future reference: https://devhints.io/xpath

Answer 2

Thanks so much for your help!

I've refactored with your suggestions in mind but can't get it working properly. I've now got the parent as ItemsListContainer, and this component fetches the data, stores it in state and returns the ItemCard(s).

const dataUrl = "https://s3-eu-west-1.amazonaws.com/olio-staging-images/developer/test-articles-v4.json"

const ItemsListContainer = () => {

    const [items, setItems] = useState([])
    
    const fetchItemData = async () => {
        const response = await fetch(dataUrl)
        const jsonData = await response.json()
        setItems(jsonData)
        console.log(items)
        }
    
    useEffect(() => {
        fetchItemData()
    }, [])

    if(items.length > 0) {

        return (
        <>
            {items.map((item) => (
                <ItemCard item={item} />
            ))}
        </>
        )
        
    } else {
        return (
            <div>Loading items...</div>
        )
    }
}

ItemCard returns the three components:

const ItemCard = ({item}) => {
    
    return (
        <>  
            <article>
                <ItemName item={item} />
                <ItemMap item={item} />
                <FavouriteButton item={item} />
            </article>
        </>
    ) 
}

ItemName returns each:

const ItemName = (props) => {
    
    console.log(props.item.title)

    return (
        <>
            {props.item.map((item) => (
                <p key={item.title}>{item.title}</p>
            ))}
        </>
    )
}

The error I get in the console is 'Uncaught TypeError: props.item.map is not a function at ItemName (ItemName.js:6)'.

The console.log works and prints what I want displayed in the p tag.