Elementos em loop e cliques sequenciais em crianças

Estou tentando automatizar uma tarefa por meio do console do Firefox nas Ferramentas do Desenvolvedor executando algum código jQuery.

Primeiro, um exemplo dos nós pelos quais preciso passar. Observe os comentários em linha. Há nós em que o botão tem um intervalo que não contém a palavra "Ciclismo" e deve ser ignorado.

<div class="ActivityListItem_activityType__qQkN4">
    <button>
        <span class="ActivityListItem_activityTypeText__jWs2o">Cycling</span>
        <span class="InlineEditDropdown_iconPointerDown__0bK4V ActivityListItem_isHidden__2pG6N"><i
                class="icon-pointer-down"></i>
        </span>
    </button>

    <!-- dynamically added after clicking above button -->
    <ul class="InlineEditDropdown_dropdownContainer__E5M6g" role="menu">
        <!-- omitted children li -->
        <li class="InlineEditDropdown_dropdownItem__WkY6H null null" tabindex="0"><a href="#" role="menuitem">Mountain Biking</a></li>
        <!-- omitted children li -->
    </ul>
</div>

Os passos que parecem precisar ser replicados:

1. clique no botão, que dispara um evento e faz uma lista aparecer
2. na lista, clique na opção desejada que dispara outro evento

O script que estou executando no console:

var script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.6.0.min.js';
document.head.appendChild(script);

var x = 0;
//select using start of the class name
$('div[class^="ActivityListItem_activityType"]').each(function(x){
    //alert("here..."+x); //outputs incremented value
    
    //click to make the list appear
    $(this).children('button span:contains("Cycling")').click();
    
    //click the right li to launch event
    $(this).children('ul li a:contains("Mountain Biking")').click();
});

Nenhum erro, mas também não vejo muita coisa acontecendo (além do alerta quando está habilitado).

Supondo que meus seletores estejam errados? Talvez eu esteja entendendo errado como usar .children()?