Example of and some commentary on how to interact with Angular Material Select Component or mat-slect

README.rst

What is this gist?

A question was asked within the Robot Framework community. That is "Does anyone know how to interact with ... mat-select fields in the robot?". This is a detailed response that delves into both the specific problem but also some themes around that question and my examples.

Disclaimer

I have alot to say (why these locators, what is this Angular Library and a lot of how one uses it, etc) but little time. So I expect this to be a incomplete and conssistanly in flux gist. But hopefully it is helpful.

ng_mat.robot

*** Settings ***
Library  SeleniumLibrary
Library  AngularJSLibrary  root_selector=[ng-version]
# Library  DebugLibrary

Test Setup    Load Angular Material Select Component Page

*** Variables ***
${basic_mat_select_root}     xpath://h4[contains(text(),"Basic mat-select")]/following-sibling::mat-form-field[1]
${basic_native_select_root}  xpath://h4[contains(text(),"Basic native select")]/following-sibling::mat-form-field[1]

*** Test Cases ***
Basic mat-select
    # One skillset with web testing to learn is which element should one interact
    # with to initiate some action. For example with this basic mat select I first
    # tried this element/locator.
    #  Click Element    ${basic_mat_select_root} >> css:.mat-mdc-form-field-flex
    # In this case selenium tells me something else gets the click. Eventually as
    # seen below I just the mat-select element.

    # Select "Pizza" using click select and click option method
    Click Element    ${basic_mat_select_root} >> css:mat-select
    Click Element    ${basic_mat_select_root} >> xpath://span[contains(text()," Pizza ")]/parent::mat-option
    
    # If you want to "pause" see this,
    #  install DebugLibrary (using `pip install robotframework-debuglibrary`)
    #  and uncomment the library import above and this Debuig line below
    # Debug

Basic native select
    Select From List By Value    ${basic_native_select_root} >> css:select  mercedes

*** Keywords ***
Load Angular Material Select Component Page
    # Using Angular Verion 15 for Angular Accesibiilty functionality
    Open Browser  https://v15.material.angular.io/components/select/overview  Chrome
    # Dismiss Cookie Overlay
    Run Keyword And Ignore Error    Click Element  xpath://app-cookie-popup//button