How do I select items from a custom dropdown for the page to change?

Daniel Ciantar 0
Viewed 59
<bc-dropdown class="hydrated" options="Week 1,Week 2,Week 3,Week 4,Week 5,Week 6,Week 7,Week 8,Week 9,Week 10,Week 11,Week 12,Week 13,Week 14,Week 15,Bowls" selected="Week 1" uid="fd5704d7-8531-483b-9f92-96340b80da78">
            <!--r.4-->
            <div class="bc-dropdown bc-wc-select-container bc-week-dropdown-width d-flex justify-content-end">
              <div class="position-relative w-100">
                <div class="bg-white h-100 sport-dropdown w-100">
                  <div class="align-items-center d-flex h-100 justify-content-between my-auto">
                    <p>
                      <strong class="category font-sf-ui-display-medium my-auto pl-3">
                        Week 2</strong>
                    </p>
                    <span class="pr-3">
                      <i class="fa-angle-down fas"></i>
                    </span>
                  </div>
                </div>
                <div class="bc-week-dropdown-width dropdown-menu overflow-auto">
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 1">
                    <strong class="category-text">
                      Week 1</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 2">
                    <strong class="dropdown-item-selected">
                      Week 2</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 3">
                    <strong class="category-text">
                      Week 3</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 4">
                    <strong class="category-text">
                      Week 4</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 5">
                    <strong class="category-text">
                      Week 5</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 6">
                    <strong class="category-text">
                      Week 6</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 7">
                    <strong class="category-text">
                      Week 7</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 8">
                    <strong class="category-text">
                      Week 8</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 9">
                    <strong class="category-text">
                      Week 9</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 10">
                    <strong class="category-text">
                      Week 10</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 11">
                    <strong class="category-text">
                      Week 11</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 12">
                    <strong class="category-text">
                      Week 12</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 13">
                    <strong class="category-text">
                      Week 13</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 14">
                    <strong class="category-text">
                      Week 14</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Week 15">
                    <strong class="category-text">
                      Week 15</strong>
                  </div>
                  <div class="category cursor-pointer dropdown-item font-sf-ui-display-medium" data-value="Bowls">
                    <strong class="category-text">
                      Bowls</strong>
                  </div>
                </div>
              </div>
            </div>
          </bc-dropdown>

I have this code which I need to change the selected dropdown using selenium in python however I cannot get it to work. I have tried many things including changing the selected attribute with this:

dropdown = browser.find_element(By.TAG_NAME, "bc-dropdown")
browser.execute_script("arguments[0].setAttribute('selected',arguments[1])",dropdown, value)

I cannot figure out how to do this. The problem is that if I change the selected attribute manually, the rest of the page does not change at all and since it is not a select element I cannot use the select features already built into selenium. Can anyone help me?

selenium-webdriver web-scraping selenium python
1 Answers

You can click that dropdown (with years - from what I can understand from your request) and also dropdown for weeks -- and also reject the cookies, to be able to click those dropdowns -- with:

try:
    WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.ID, "onetrust-reject-all-handler"))).click()
    print('rejected cookies')
except Exception as e:
    print('no cookie button!')

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, 'bc-dropdown[options="2021,2022"]'))).click()
print('clicked years dropdown')
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, 'div[class^="bc-dropdown bc-wc-select-container"]'))).click()
print('clicked the weekly dropdown')
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, 'div[class^="bc-week-dropdown-width dropdown-menu"]'))).find_element(By.CSS_SELECTOR, 'div[data-value="Week 13"]').click()
print('selected Week 13')

Don't forget the imports mentioned by F.Hoque in his response. Selenium docs can be found at https://www.selenium.dev/documentation/

On another thought: the actual data you're after can be obtained in a more robust fashion, scraping the GraphQL endpoint which hydrates that page. If you will ask F.Hoque nicely, he might be inclined to tell you about it.

Barry the Platipus0
Related