How to create a list based on CSS selector

Given the CSS selector (for example, Pinterest)

div[id="__PWS_ROOT__"] div[class="mainContainer"] div[class="gridCentered"] a img[src^="https://i.pinimg.com/"]

It should generate a list of images’ src links, however, it only grabs the first one. How do I make that into a list? Code for example

import ".\PinterestBoard.appmask"
WebAutomation.LaunchChrome \
    Url: 'https://www.pinterest.com/manchuwook/digital-character-portraits/male/' \
    WindowState:WebAutomation.BrowserWindowState.Normal \
    ClearCache:False \
    ClearCookies:False \
    BrowserInstance=> PinBrowser
WebAutomation.GetDetailsOfElement \
    BrowserInstance:PinBrowser \
    Control: PinterestBoard.PinImage \ 
    AttributeName:('src') \
    AttributeValue=> ElementLink
Console.Write Message: 'src: ' + ElementLink

Hello @manchuwook, you could generate a list of image source links by using Javascript like the example below:

WebAutomation.LaunchChrome \
    Url: 'https://www.pinterest.com/manchuwook/digital-character-portraits/male/' \
    WindowState:WebAutomation.BrowserWindowState.Normal \
    ClearCache:False \
    ClearCookies:False \
    BrowserInstance=> PinBrowser

#Execute Javascript so as to return a list of images source links

WebAutomation.ExecuteJavascript BrowserInstance: PinBrowser Javascript:'''function ExecuteScript() { var imageList = [];
    var images = document.querySelectorAll('img[src^="https://i.pinimg.com/"]');
    images.forEach(function(element){
                imageList.push(element.src);});
    return imageList;}''' \
    Result=> ElementLink

#The element link variable is Text type, we can convert it to List type by spliting it with a comma delimiter

Text.SplitWithDelimiter Text: ElementLink CustomDelimiter: ',' IsRegEx:False Result=> ElementLink
Console.Write Message: 'src: ' + ElementLink
3 Likes

That works! Thank you.

2 Likes