如何使用 selenium Python 點擊動態按鈕？

Question

我正在使用 Selenium Python 並嘗試訪問具有相同名稱但沒有 ID 的動態創建按鈕之一。

By.XPATH 和 By.CLASS_NAME 在這里不起作用。 任何建議我如何點擊這個。 這是我要點擊的按鈕

這就是我正在嘗試的方式

btn=WebDriverWait(driver, 5).until(EC.element_to_be_clickable((By.XPATH, '//*[@id="BsGnbProv"]/div[1]/div[13]/div[2]/div[3]/div[3]/button[2]')))

這是 xPath

//*[@id="BsGnbProv"]/div[1]/div[13]/div[2]/div[3]/div[3]/button[2]

這是 Button 元素詳細信息

    <button class="w-100 btn btn-light btn-sm mr-1" data-bind="disable: 
          false, click: ViewNetworkFuncModal, visible: $root.IsReadOnly" 
        style="white-space: normal;">
        <span class="mr-1 fa fa-edit">
        </span>
        <span>View Configuration</span>
        </button>

這是包含所有按鈕的此 div 的 html

<div data-bind="visible: GeneralProperties.NfCount() > 0, css: { 'bs-inactive': $root.IsInactive }" data-csv-category="Network Function Properties" class="card m-1 flex-shrink-0 ns-toggle"><div class="card-header"><label>Network Function Properties</label></div>
        <div class="overflow-auto card-body ns-width-md">
            <div class="form-group ns-width-md">
                <div class="col col-12 col-sm-3 col-md-3 col-lg-3 col-xl-3">
                    <label class="d-block text-truncate property-label text-dark" data-placement="top" data-toggle="tooltip" style="text-decoration: underline;" title="" data-original-title="Function Type">Function Type</label>
                </div>
                <div class="col col-12 col-sm-3 col-md-3 col-lg-3 col-xl-3">
                    <label class="d-block text-truncate property-label text-dark" data-placement="top" data-toggle="tooltip" style="text-decoration: underline;" title="" data-original-title="Managed Element ID">Managed Element ID</label>
                </div>
            </div>
            <!-- ko with: GeneralProperties.PuProperties -->
            <!-- ko foreach: NetworkFunctionDetailsList -->
            <div style="min-width: 480px;" class="form-group ">
        <div class="d-inline-flex align-items-center col col-12 col-sm-3 col-md-3 col-lg-3 col-xl-3">
            <label data-bind="text: NfTypeDesc, attr: { title: NfTypeDesc }" data-csv-label="Function Type" class="property-label d-block text-truncate text-dark" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="xPU">xPU</label>
        </div>
        <div class="d-inline-flex align-items-center col col-12 col-sm-3 col-md-3 col-lg-3 col-xl-3">
            <label data-bind="text: Id, attr: { title: Id }" data-csv-label="Managed Element ID" class="property-label d-block text-truncate text-dark" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="EAB8620065F0">EAB8620065F0</label>
        </div>
        <div class="col col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <button class="w-100 btn btn-light btn-sm mr-1" data-bind="disable: $root.IsReadOnly, click: LoadNetworkFuncModal, visible: !$root.IsReadOnly()" style="white-space: normal; display: none;" disabled="">
                <span class="mr-1 fa fa-edit"></span>
            <span>Edit Configuration</span></button>
            <button class="w-100 btn btn-light btn-sm mr-1" data-bind="disable: false, click: ViewNetworkFuncModal, visible: $root.IsReadOnly" style="white-space: normal;">
                <span class="mr-1 fa fa-edit"></span>
            <span>View Configuration</span></button>
        </div>
    </div>
            <!-- /ko -->
            <!-- /ko -->
            <!-- ko with: GeneralProperties.CuCpProperties -->
            <!-- ko foreach: NetworkFunctionDetailsList -->
            <div style="min-width: 480px;" class="form-group ">
        <div class="d-inline-flex align-items-center col col-12 col-sm-3 col-md-3 col-lg-3 col-xl-3">
            <label data-bind="text: NfTypeDesc, attr: { title: NfTypeDesc }" data-csv-label="Function Type" class="property-label d-block text-truncate text-dark" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="CU-CP">CU-CP</label>
        </div>
        <div class="d-inline-flex align-items-center col col-12 col-sm-3 col-md-3 col-lg-3 col-xl-3">
            <label data-bind="text: Id, attr: { title: Id }" data-csv-label="Managed Element ID" class="property-label d-block text-truncate text-dark" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="CUCP-at2200-eab8620065f0-1">CUCP-at2200-eab8620065f0-1</label>
        </div>
        <div class="col col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <button class="w-100 btn btn-light btn-sm mr-1" data-bind="disable: $root.IsReadOnly, click: LoadNetworkFuncModal, visible: !$root.IsReadOnly()" style="white-space: normal; display: none;" disabled="">
                <span class="mr-1 fa fa-edit"></span>
            <span>Edit Configuration</span></button>
            <button class="w-100 btn btn-light btn-sm mr-1" data-bind="disable: false, click: ViewNetworkFuncModal, visible: $root.IsReadOnly" style="white-space: normal;">
                <span class="mr-1 fa fa-edit"></span>
            <span>View Configuration</span></button>
        </div>
    </div>
            <!-- /ko -->
            <!-- /ko -->
            <!-- ko with: GeneralProperties.CuUpProperties -->
            <!-- ko foreach: NetworkFunctionDetailsList -->
            <div style="min-width: 480px;" class="form-group ">
        <div class="d-inline-flex align-items-center col col-12 col-sm-3 col-md-3 col-lg-3 col-xl-3">
            <label data-bind="text: NfTypeDesc, attr: { title: NfTypeDesc }" data-csv-label="Function Type" class="property-label d-block text-truncate text-dark" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="CU-UP">CU-UP</label>
        </div>
        <div class="d-inline-flex align-items-center col col-12 col-sm-3 col-md-3 col-lg-3 col-xl-3">
            <label data-bind="text: Id, attr: { title: Id }" data-csv-label="Managed Element ID" class="property-label d-block text-truncate text-dark" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="CUUP-at2200-eab8620065f0-1">CUUP-at2200-eab8620065f0-1</label>
        </div>
        <div class="col col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <button class="w-100 btn btn-light btn-sm mr-1" data-bind="disable: $root.IsReadOnly, click: LoadNetworkFuncModal, visible: !$root.IsReadOnly()" style="white-space: normal; display: none;" disabled="">
                <span class="mr-1 fa fa-edit"></span>
            <span>Edit Configuration</span></button>
            <button class="w-100 btn btn-light btn-sm mr-1" data-bind="disable: false, click: ViewNetworkFuncModal, visible: $root.IsReadOnly" style="white-space: normal;">
                <span class="mr-1 fa fa-edit"></span>
            <span>View Configuration</span></button>
        </div>
    </div>
            <!-- /ko -->
            <!-- /ko -->
            <!-- ko with: GeneralProperties.DuProperties -->
            <!-- ko foreach: NetworkFunctionDetailsList -->
            <div style="min-width: 480px;" class="form-group ">
        <div class="d-inline-flex align-items-center col col-12 col-sm-3 col-md-3 col-lg-3 col-xl-3">
            <label data-bind="text: NfTypeDesc, attr: { title: NfTypeDesc }" data-csv-label="Function Type" class="property-label d-block text-truncate text-dark" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="DU">DU</label>
        </div>
        <div class="d-inline-flex align-items-center col col-12 col-sm-3 col-md-3 col-lg-3 col-xl-3">
            <label data-bind="text: Id, attr: { title: Id }" data-csv-label="Managed Element ID" class="property-label d-block text-truncate text-dark" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="DU-at2200-eab8620065f0-1">DU-at2200-eab8620065f0-1</label>
        </div>
        <div class="col col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <button class="w-100 btn btn-light btn-sm mr-1" data-bind="disable: $root.IsReadOnly, click: LoadNetworkFuncModal, visible: !$root.IsReadOnly()" style="white-space: normal; display: none;" disabled="">
                <span class="mr-1 fa fa-edit"></span>
            <span>Edit Configuration</span></button>
            <button class="w-100 btn btn-light btn-sm mr-1" data-bind="disable: false, click: ViewNetworkFuncModal, visible: $root.IsReadOnly" style="white-space: normal;">
                <span class="mr-1 fa fa-edit"></span>
            <span>View Configuration</span></button>
        </div>
    </div>
            <!-- /ko -->
            <!-- /ko -->
            <!-- ko with: GeneralProperties.RuProperties -->
            <!-- ko foreach: NetworkFunctionDetailsList -->
            <div style="min-width: 480px;" class="form-group ">
        <div class="d-inline-flex align-items-center col col-12 col-sm-3 col-md-3 col-lg-3 col-xl-3">
            <label data-bind="text: NfTypeDesc, attr: { title: NfTypeDesc }" data-csv-label="Function Type" class="property-label d-block text-truncate text-dark" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="RU">RU</label>
        </div>
        <div class="d-inline-flex align-items-center col col-12 col-sm-3 col-md-3 col-lg-3 col-xl-3">
            <label data-bind="text: Id, attr: { title: Id }" data-csv-label="Managed Element ID" class="property-label d-block text-truncate text-dark" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="RU-at2200-eab8620065f0-1">RU-at2200-eab8620065f0-1</label>
        </div>
        <div class="col col-12 col-sm-4 col-md-4 col-lg-4 col-xl-4">
            <button class="w-100 btn btn-light btn-sm mr-1" data-bind="disable: $root.IsReadOnly, click: LoadNetworkFuncModal, visible: !$root.IsReadOnly()" style="white-space: normal; display: none;" disabled="">
                <span class="mr-1 fa fa-edit"></span>
            <span>Edit Configuration</span></button>
            <button class="w-100 btn btn-light btn-sm mr-1" data-bind="disable: false, click: ViewNetworkFuncModal, visible: $root.IsReadOnly" style="white-space: normal;">
                <span class="mr-1 fa fa-edit"></span>
            <span>View Configuration</span></button>
        </div>
    </div>
            <!-- /ko -->
            <!-- /ko -->
        </div>
    </div>

Answer 1

@Atif，感謝您提供詳細信息 HTML。 你能試試下面的XPath：

//button/span[text()='View Configuration']

這將為您提供五個按鈕，然后您可以采取相應的措施。 我試過了，它工作正常。