如何使用selenium Python点击动态按钮

Question

我正在使用Selenium Python，并试图访问一个动态创建的按钮，这些按钮具有相同的名称，但没有ID。

由。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 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']

这将给你五个按钮，然后你可以采取相应的行动。我试过这个，效果很好。