Selenium 对动态生成的内容的单击操作未触发预期的折叠/展开行为

问：

我正在使用 Python 中的 Selenium WebDriver 自动执行一个过程，我需要以编程方式单击单元、主题和页面以折叠和展开其内容，类似于手动单击时发生的情况。但是，当我的脚本执行单击时，内容不会按预期折叠/展开，而是保持静态或无法正确显示嵌套元素。当我自己单击它时，它看起来可以正常工作。

问题描述：当脚本单击折叠/展开按钮（由按钮元素中的字形表示）时，属性会按预期更改（从 到 或反之亦然），但嵌套内容不会像手动单击那样变得可见/隐藏。aria-expandedtruefalse

我尝试过什么：

1. 我尝试在执行单击之前使用 来确保元素是可单击的。WebDriverWait
2. 我还尝试使用 JavaScript 执行点击。driver.execute_script("arguments[0].click();", element)
3. 我尝试使用不同的 Selenium 点击操作，例如 、 等。element.click()ActionChains(driver).move_to_element(element).click().perform()

代码片段：

这是我用于折叠单元的代码部分：

def collapse_segment(driver, segment_name, index):
    try:
        print(f"Attempting to collapse {segment_name} for row {index + 1}")
        segment_button = WebDriverWait(driver, 10).until(
            EC.element_to_be_clickable((By.XPATH, f"//p[contains(text(), '{segment_name}')]/preceding-sibling::div/button[contains(@class,'segmentExpander')]")))
        segment_button.click()
    except TimeoutException:
        print(f"Timeout occurred while trying to collapse {segment_name} for row {index + 1}")
    except NoSuchElementException:
        print(f"Element not found to collapse {segment_name} for row {index + 1}")
    except Exception as e:
        print(f"An exception occurred while collapsing {segment_name} for row {index + 1}: {e}")

这是脚本单击字形进行折叠时单元部分的 html 片段（另请参阅我的图像部分中的图 1）

<li class="list-group-item unit ng-scope" ng-repeat="segment in segments" ng-class="{ 'not-sortable': (segment.section != 'unit' &amp;&amp; segment.section != 'interactive_game') }" style="">
          <!-- ngIf: (segment.section == 'unit' || segment.section == 'interactive_game') --><div ng-if="(segment.section == 'unit' || segment.section == 'interactive_game')" class="ng-scope">
            <div class="input-group">
              <div class="input-group-btn">
                <!-- ngIf: segment.section == 'unit' --><button ng-if="segment.section == 'unit'" class="btn btn-light segmentExpander ng-scope" ng-click="accordionSegment(segment)" data-toggle="collapse" data-target="#unit-497" aria-expanded="true">
                  <span class="glyphicon"></span>
                </button><!-- end ngIf: segment.section == 'unit' -->
                <!-- ngIf: segment.section == 'interactive_game' -->
                <span class="btn btn-light hidden" ng-class="{ hidden: !editMode }" aria-label="Reposition segment">
                  <span class="glyphicon glyphicon-move handle" aria-hidden="true"></span>
                </span>
              </div>

              <p class="name ng-binding" ng-class="{ hidden: editMode}">Unit 1: Introduction to Bowhunting</p>
              <input ng-change="markSegmentDirty(segment)" ng-class="{ hidden: !editMode, 'newUnit': !segment.id }" type="text" class="form-control ng-pristine ng-untouched ng-valid hidden" id="input-course-id" ng-model="segment.name">

              <div class="input-group-btn dropdown hidden" uib-dropdown="" on-toggle="toggled(open)" ng-class="{ hidden: !editMode}">
                <button class="btn btn-light dropdown-toggle" type="button" uib-dropdown-toggle="" ng-disabled="!segment.id || insertingSegment" aira-label="Actions" aria-haspopup="true" aria-expanded="false">
                  <span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
                </button>
                <ul class="dropdown-menu dropdown-options" uib-dropdown-menu="" aria-labelledby="options-dropdown">
                  <li role="option">
                    <a role="button" ng-click="openPropertiesModal(segment)">
                      <span class="glyphicon glyphicon-cog" aria-hidden="true"></span> Properties
                    </a>
                  </li>
                  <li role="option">
                    <a href="" ng-click="deleteSegment(segment, segments)">
                      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete Unit
                    </a>
                  </li>
                  <li role="option">
                    <!-- ngIf: segment.section == 'unit' --><a href="" ng-if="segment.section == 'unit'" ng-click="addSegment(segment, 'topic')" class="ng-scope">
                      <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> New Topic
                    </a><!-- end ngIf: segment.section == 'unit' -->
                  </li>
                  <!-- ngIf: !hasQuiz(segment) && segment.section == 'unit' -->
                </ul>
              </div>
            </div>

            <!-- ngIf: segment.children.length --><ul ng-if="segment.children.length" class="list-group unit ng-pristine ng-untouched ng-valid ng-scope ng-isolate-scope ui-sortable ui-sortable-disabled collapse in" ng-class="{ in: segmentExpanded(segment) }" id="unit-497" ui-sortable="unitSortableOptions" ng-model="segment.children" data-parent-id="497" style="" aria-expanded="true">
              <!-- ngRepeat: child in segment.children --><!-- ngIf: segmentExpanded(segment) --><!-- end ngRepeat: child in segment.children --><!-- ngIf: segmentExpanded(segment) --><!-- end ngRepeat: child in segment.children --><!-- ngIf: segmentExpanded(segment) --><!-- end ngRepeat: child in segment.children --><!-- ngIf: segmentExpanded(segment) --><!-- end ngRepeat: child in segment.children -->
            </ul><!-- end ngIf: segment.children.length -->
          </div><!-- end ngIf: (segment.section == 'unit' || segment.section == 'interactive_game') -->

          <!-- ngIf: segment.section == 'exam' || segment.section == 'practice_exam' -->
        </li>

这是我物理单击字形折叠时单元部分的 html 片段（另请参阅我的图像部分中的图 2）：

      <p class="name ng-binding hidden" ng-class="{ hidden: editMode}">Unit 1: Introduction to Bowhunting</p>
      <input ng-change="markSegmentDirty(segment)" ng-class="{ hidden: !editMode, 'newUnit': !segment.id }" type="text" class="form-control ng-pristine ng-valid ng-touched" id="input-course-id" ng-model="segment.name" style="">

      <div class="input-group-btn dropdown" uib-dropdown="" on-toggle="toggled(open)" ng-class="{ hidden: !editMode}">
        <button class="btn btn-light dropdown-toggle" type="button" uib-dropdown-toggle="" ng-disabled="!segment.id || insertingSegment" aira-label="Actions" aria-haspopup="true" aria-expanded="false">
          <span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
        </button>
        <ul class="dropdown-menu dropdown-options" uib-dropdown-menu="" aria-labelledby="options-dropdown">
          <li role="option">
            <a role="button" ng-click="openPropertiesModal(segment)">
              <span class="glyphicon glyphicon-cog" aria-hidden="true"></span> Properties
            </a>
          </li>
          <li role="option">
            <a href="" ng-click="deleteSegment(segment, segments)">
              <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete Unit
            </a>
          </li>
          <li role="option">
            <!-- ngIf: segment.section == 'unit' --><a href="" ng-if="segment.section == 'unit'" ng-click="addSegment(segment, 'topic')" class="ng-scope">
              <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> New Topic
            </a><!-- end ngIf: segment.section == 'unit' -->
          </li>
          <!-- ngIf: !hasQuiz(segment) && segment.section == 'unit' -->
        </ul>
      </div>
    </div>

    <!-- ngIf: segment.children.length --><ul ng-if="segment.children.length" class="list-group unit ng-pristine ng-untouched ng-valid ng-scope ng-isolate-scope ui-sortable in collapse" ng-class="{ in: segmentExpanded(segment) }" id="unit-935" ui-sortable="unitSortableOptions" ng-model="segment.children" data-parent-id="935" style="" aria-expanded="true">
      <!-- ngRepeat: child in segment.children --><!-- ngIf: segmentExpanded(segment) --><li class="list-group-item topic ng-scope" ng-if="segmentExpanded(segment)" ng-class="{ 'not-sortable': child.section != 'topic' }" ng-repeat="child in segment.children" style="">
        <!-- ngIf: child.section == 'topic' --><div ng-if="child.section == 'topic'" class="ng-scope">
          <div class="input-group">
            <div class="input-group-btn">
              <button class="btn btn-light segmentExpander collapsed" ng-click="accordionSegment(child)" data-toggle="collapse" data-target="#topic-936" ng-disabled="!child.id" aria-expanded="false">
                <span class="glyphicon"></span>
              </button>
              <span class="btn btn-light" ng-class="{ hidden: !editMode }" aria-label="Reposition topic">
                <span class="glyphicon glyphicon-move handle" aria-hidden="true"></span>
              </span>
            </div>

            <p class="name ng-binding hidden" ng-class="{ hidden: editMode}">Topic 1: How Bowhunting Developed</p>
            <input ng-change="markSegmentDirty(child)" ng-class="{ hidden: !editMode, 'newTopic': !child.id }" type="text" class="form-control ng-pristine ng-untouched ng-valid" id="input-course-id" ng-model="child.name">

            <div class="input-group-btn dropdown" uib-dropdown="" on-toggle="toggled(open)" ng-class="{ hidden: !editMode}">
              <button class="btn btn-light dropdown-toggle" type="button" uib-dropdown-toggle="" ng-disabled="!child.id || insertingSegment" aria-label="Actions" aria-haspopup="true" aria-expanded="false">
                <span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
              </button>
              <ul class="dropdown-menu dropdown-options" uib-dropdown-menu="" aria-labelledby="options-dropdown">
                <li role="option">
                  <a href="" ng-click="deleteSegment(child, segment.children)">
                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete Topic
                  </a>
                </li>
                <li role="option">
                  <a href="" ng-click="addSegment(child, 'page')">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> New Page
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <div ng-show="!child.id" class="row ng-hide">
            <div class="col-xs-11 col-xs-offset-1 top-space-sm">
              <p>Your new topic will be under the <u class="ng-binding">Unit 1: Introduction to Bowhunting</u> unit. <br>
                <a ng-click="save();" href="">Save this new topic</a> and then you can begin to add pages/content.
              </p>
            </div>
          </div>
          <!-- ngIf: child.children.length --><ul ng-if="child.children.length" class="list-group topic ng-pristine ng-untouched ng-valid ng-scope ng-isolate-scope ui-sortable collapse" ng-class="{ in: segmentExpanded(child) }" id="topic-936" ui-sortable="topicSortableOptions" ng-model="child.children" data-parent-id="936" style="height: 30px;" aria-expanded="false">
            <!-- ngRepeat: subchild in child.children --><!-- ngIf: segmentExpanded(child) --><!-- end ngRepeat: subchild in child.children --><!-- ngIf: segmentExpanded(child) --><!-- end ngRepeat: subchild in child.children --><!-- ngIf: segmentExpanded(child) --><!-- end ngRepeat: subchild in child.children --><!-- ngIf: segmentExpanded(child) --><!-- end ngRepeat: subchild in child.children -->
          </ul><!-- end ngIf: child.children.length -->
        </div><!-- end ngIf: child.section == 'topic' -->
        <!-- ngIf: child.section == 'quiz' -->
      </li><!-- end ngIf: segmentExpanded(segment) --><!-- end ngRepeat: child in segment.children --><!-- ngIf: segmentExpanded(segment) --><li class="list-group-item topic ng-scope" ng-if="segmentExpanded(segment)" ng-class="{ 'not-sortable': child.section != 'topic' }" ng-repeat="child in segment.children">
        <!-- ngIf: child.section == 'topic' --><div ng-if="child.section == 'topic'" class="ng-scope">
          <div class="input-group">
            <div class="input-group-btn">
              <button class="btn btn-light segmentExpander" ng-click="accordionSegment(child)" data-toggle="collapse" data-target="#topic-941" ng-disabled="!child.id" aria-expanded="false">
                <span class="glyphicon"></span>
              </button>
              <span class="btn btn-light" ng-class="{ hidden: !editMode }" aria-label="Reposition topic">
                <span class="glyphicon glyphicon-move handle" aria-hidden="true"></span>
              </span>
            </div>

            <p class="name ng-binding hidden" ng-class="{ hidden: editMode}">Topic 2: The Sport of Bowhunting</p>
            <input ng-change="markSegmentDirty(child)" ng-class="{ hidden: !editMode, 'newTopic': !child.id }" type="text" class="form-control ng-pristine ng-untouched ng-valid" id="input-course-id" ng-model="child.name">

            <div class="input-group-btn dropdown" uib-dropdown="" on-toggle="toggled(open)" ng-class="{ hidden: !editMode}">
              <button class="btn btn-light dropdown-toggle" type="button" uib-dropdown-toggle="" ng-disabled="!child.id || insertingSegment" aria-label="Actions" aria-haspopup="true" aria-expanded="false">
                <span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
              </button>
              <ul class="dropdown-menu dropdown-options" uib-dropdown-menu="" aria-labelledby="options-dropdown">
                <li role="option">
                  <a href="" ng-click="deleteSegment(child, segment.children)">
                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete Topic
                  </a>
                </li>
                <li role="option">
                  <a href="" ng-click="addSegment(child, 'page')">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> New Page
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <div ng-show="!child.id" class="row ng-hide">
            <div class="col-xs-11 col-xs-offset-1 top-space-sm">
              <p>Your new topic will be under the <u class="ng-binding">Unit 1: Introduction to Bowhunting</u> unit. <br>
                <a ng-click="save();" href="">Save this new topic</a> and then you can begin to add pages/content.
              </p>
            </div>
          </div>
          <!-- ngIf: child.children.length --><ul ng-if="child.children.length" class="list-group collapse topic ng-pristine ng-untouched ng-valid ng-scope ng-isolate-scope ui-sortable" ng-class="{ in: segmentExpanded(child) }" id="topic-941" ui-sortable="topicSortableOptions" ng-model="child.children" data-parent-id="941" style="">
            <!-- ngRepeat: subchild in child.children --><!-- ngIf: segmentExpanded(child) --><!-- end ngRepeat: subchild in child.children --><!-- ngIf: segmentExpanded(child) --><!-- end ngRepeat: subchild in child.children --><!-- ngIf: segmentExpanded(child) --><!-- end ngRepeat: subchild in child.children --><!-- ngIf: segmentExpanded(child) --><!-- end ngRepeat: subchild in child.children -->
          </ul><!-- end ngIf: child.children.length -->
        </div><!-- end ngIf: child.section == 'topic' -->
        <!-- ngIf: child.section == 'quiz' -->
      </li><!-- end ngIf: segmentExpanded(segment) --><!-- end ngRepeat: child in segment.children --><!-- ngIf: segmentExpanded(segment) --><li class="list-group-item topic ng-scope" ng-if="segmentExpanded(segment)" ng-class="{ 'not-sortable': child.section != 'topic' }" ng-repeat="child in segment.children">
        <!-- ngIf: child.section == 'topic' --><div ng-if="child.section == 'topic'" class="ng-scope">
          <div class="input-group">
            <div class="input-group-btn">
              <button class="btn btn-light segmentExpander" ng-click="accordionSegment(child)" data-toggle="collapse" data-target="#topic-946" ng-disabled="!child.id" aria-expanded="false">
                <span class="glyphicon"></span>
              </button>
              <span class="btn btn-light" ng-class="{ hidden: !editMode }" aria-label="Reposition topic">
                <span class="glyphicon glyphicon-move handle" aria-hidden="true"></span>
              </span>
            </div>

            <p class="name ng-binding hidden" ng-class="{ hidden: editMode}">Topic 3: Bowhunter Education</p>
            <input ng-change="markSegmentDirty(child)" ng-class="{ hidden: !editMode, 'newTopic': !child.id }" type="text" class="form-control ng-pristine ng-untouched ng-valid" id="input-course-id" ng-model="child.name">

            <div class="input-group-btn dropdown" uib-dropdown="" on-toggle="toggled(open)" ng-class="{ hidden: !editMode}">
              <button class="btn btn-light dropdown-toggle" type="button" uib-dropdown-toggle="" ng-disabled="!child.id || insertingSegment" aria-label="Actions" aria-haspopup="true" aria-expanded="false">
                <span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
              </button>
              <ul class="dropdown-menu dropdown-options" uib-dropdown-menu="" aria-labelledby="options-dropdown">
                <li role="option">
                  <a href="" ng-click="deleteSegment(child, segment.children)">
                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete Topic
                  </a>
                </li>
                <li role="option">
                  <a href="" ng-click="addSegment(child, 'page')">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> New Page
                  </a>
                </li>
              </ul>
            </div>
          </div>

          <div ng-show="!child.id" class="row ng-hide">
            <div class="col-xs-11 col-xs-offset-1 top-space-sm">
              <p>Your new topic will be under the <u class="ng-binding">Unit 1: Introduction to Bowhunting</u> unit. <br>
                <a ng-click="save();" href="">Save this new topic</a> and then you can begin to add pages/content.
              </p>
            </div>
          </div>
          <!-- ngIf: child.children.length --><ul ng-if="child.children.length" class="list-group collapse topic ng-pristine ng-untouched ng-valid ng-scope ng-isolate-scope ui-sortable" ng-class="{ in: segmentExpanded(child) }" id="topic-946" ui-sortable="topicSortableOptions" ng-model="child.children" data-parent-id="946" style="">
            <!-- ngRepeat: subchild in child.children --><!-- ngIf: segmentExpanded(child) --><!-- end ngRepeat: subchild in child.children --><!-- ngIf: segmentExpanded(child) --><!-- end ngRepeat: subchild in child.children --><!-- ngIf: segmentExpanded(child) --><!-- end ngRepeat: subchild in child.children --><!-- ngIf: segmentExpanded(child) --><!-- end ngRepeat: subchild in child.children --><!-- ngIf: segmentExpanded(child) --><!-- end ngRepeat: subchild in child.children -->
          </ul><!-- end ngIf: child.children.length -->
        </div><!-- end ngIf: child.section == 'topic' -->
        <!-- ngIf: child.section == 'quiz' -->
      </li><!-- end ngIf: segmentExpanded(segment) --><!-- end ngRepeat: child in segment.children --><!-- ngIf: segmentExpanded(segment) --><li class="list-group-item topic ng-scope not-sortable" ng-if="segmentExpanded(segment)" ng-class="{ 'not-sortable': child.section != 'topic' }" ng-repeat="child in segment.children" style="">
        <!-- ngIf: child.section == 'topic' -->
        <!-- ngIf: child.section == 'quiz' --><div ng-if="child.section == 'quiz'" class="ng-scope">
          <div class="input-group assessment quiz input" ng-class="{ input: editMode }">
            <p class="name hidden" ng-class="{ hidden: editMode}"><a ui-sref="nav.courses.show.segments.show.assessment-template({segmentId: child.id})" class="ng-binding" href="#/courses/301003/segments/951/assessment-template">Unit 1 Quiz</a></p>
            <input ng-change="markSegmentDirty(child)" ng-class="{ hidden: !editMode, 'newUnit': !child.id }" type="text" class="form-control ng-pristine ng-untouched ng-valid" id="input-course-id" ng-model="child.name">

            <div class="input-group-btn dropdown" uib-dropdown="" on-toggle="toggled(open)" ng-class="{ hidden: !editMode }">
             <button class="btn btn-light dropdown-toggle" type="button" uib-dropdown-toggle="" aria-label="Actions" aria-haspopup="true" aria-expanded="false">
               <span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
             </button>
             <ul class="dropdown-menu dropdown-options" uib-dropdown-menu="" aria-labelledby="options-dropdown">
               <li role="option">
                 <a role="button" ng-click="deleteSegment(child, false)">
                   <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete Quiz
                 </a>
               </li>
             </ul>
            </div>
          </div>
        </div><!-- end ngIf: child.section == 'quiz' -->
      </li><!-- end ngIf: segmentExpanded(segment) --><!-- end ngRepeat: child in segment.children -->
    </ul><!-- end ngIf: segment.children.length -->
  </div><!-- end ngIf: (segment.section == 'unit' || segment.section == 'interactive_game') -->

  <!-- ngIf: segment.section == 'exam' || segment.section == 'practice_exam' -->
</li>

预期行为：单击该按钮时，嵌套元素应折叠（如果已展开）或展开（如果已折叠）。

观察到的行为：aria-expanded 属性会正确更新，但内容不会相应地显示。

如果能深入了解为什么会发生这种情况或如何进一步解决此问题，我们将不胜感激！

图像：

完整脚本：

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import pandas as pd
from datetime import datetime
import time
from selenium.common.exceptions import TimeoutException, NoSuchElementException

# Step 0: Web Driver Configuration
driver_path = r'C:\Users\\OneDrive\Documents\chromedriver-win64\chromedriver.exe'
driver = webdriver.Chrome()
driver.maximize_window()

# Function to login to the website
def login_to_website(driver, url, email, password):
    driver.get(url)
    WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.ID, "user_email")))
    driver.find_element(By.ID, "user_email").send_keys(email)
    driver.find_element(By.ID, "user_password").send_keys(password)
    driver.find_element(By.ID, "user_password").submit()

# Function to toggle edit mode on
def toggle_edit_mode_on(driver):
    edit_mode_toggle = WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.ID, "toggle-edit-mode")))
    if not edit_mode_toggle.get_attribute('checked'):
        driver.execute_script("arguments[0].click();", edit_mode_toggle)

# Updated Function to collapse a segment
def collapse_segment(driver, segment_name, index):
    try:
        print(f"Attempting to collapse {segment_name} for row {index + 1}")
        segment_button = WebDriverWait(driver, 10).until(
            EC.element_to_be_clickable((By.XPATH, f"//p[contains(text(), '{segment_name}')]/preceding-sibling::div/button[contains(@class,'segmentExpander')]")))
        segment_button.click()
    except TimeoutException:
        print(f"Timeout occurred while trying to collapse {segment_name} for row {index + 1}")
    except NoSuchElementException:
        print(f"Element not found to collapse {segment_name} for row {index + 1}")
    except Exception as e:
        print(f"An exception occurred while collapsing {segment_name} for row {index + 1}: {e}")

# Function to extract video length
def extract_video_length(driver):
    video_length_element = WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.CSS_SELECTOR, ".FocusTarget_module_focusTarget__02e194b8")))
    return video_length_element.get_attribute("aria-valuetext").split(' of ')[-1]

# Read CSV file
df = pd.read_csv(r'C:\Users\\OneDrive\Documents\bowhunter.csv')

# Add a new column for video length
df['Video Length'] = None

# Login to the admin portal
login_to_website(driver, "", "", "")

# Function to save DataFrame
def save_progress(df, suffix=""):
    timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
    output_file = fr'C:\users\\downloads\bowhunter_updated_{suffix}_{timestamp}.csv'
    df.to_csv(output_file, index=False)
    print(f"Progress saved to {output_file}")
    return output_file

try:
    # Iterate over the CSV entries
    for index, row in df.iterrows():
        # Navigate to the course segment URL
        driver.get(row['chunk_url'])
        time.sleep(3)

        unit_name, topic_name, _ = row['main_segments'].split(' :: ')
        page_name = row['name'].split(': ')[-1]

        # Collapsing the segments to reach the video
        collapse_segment(driver, unit_name, index)
        time.sleep(3)
        collapse_segment(driver, topic_name, index)
        time.sleep(3)
        collapse_segment(driver, page_name, index)

        # Turn on edit mode
        toggle_edit_mode_on(driver)
        time.sleep(3)

        # Extract and store video length
        try:
            video_length = extract_video_length(driver)
            df.loc[index, 'Video Length'] = video_length
            print(f"Video length for {row['name']} is {video_length}")
        except Exception as e:
            print(f"Could not extract video length for row {index + 1}: {e}")

except Exception as e:
    print(f"An exception occurred: {e}")
    save_progress(df, "interrupted")
    raise
finally:
    input("Press any key to close the browser...")
    save_progress(df)
    driver.quit()