如何将焦点切换到Angular弹窗，并滚动元素并点击

Question

在我的页面中，当点击链接时，会出现VW-Modal--现在我必须将弹出式菜单滚动到元素，然后点击，但不知何故，当我运行时，它在VS中工作，但在虚拟机中运行时却不工作--CCNet。

代码： 没有工作

        ((IJavaScriptExecutor)Driver).ExecuteScript("arguments[0].scrollIntoView();", Driver.FindElement(button_RedoReasons_by));
        Driver.MoveToElement(button_RedoReasons_by);

        Driver.Click(button_RedoReasons_by);

XPath: var button_RedoReasons_by = By.XPath("/")[@class='redo__reason']/。[contains(@class, 'optioned-container')]")。

DOM元素。

<!-- ngIf: vm.viewModel.redoPoup === true -->
<div class="job-progress-details redo-request-modal ng-scope" ng-if="vm.viewModel.redoPoup === true">
    <div class="popup-header">
        <h3 class="ng-binding">Order Redo Request [1434467]</h3>
        <a href="javascript:void(0);" class="close-popup" ng-click="vm.hideRedoRequest()">X</a>
    </div>
    <!-- NEW MODAL BODY -->
    <div class="popup-content">



        <!-- REDO ENTIRE ORDER -->
        <div ng-show="vm.sendRedoRequestCtrl.viewModel.isRedoEntireOrder === true" class="ng-hide">

            <div class="redo__option">
                <h3 class="redo__order-num ng-binding">Order Number 1434467</h3>

                <div class="redo__option-all" id="redo-option-all">
                    <div class="redo__input-label">
                        <input ng-model="vm.sendRedoRequestCtrl.viewModel.redoType" type="radio" id="redo-waitlist-all" name="redo-option-all" value="1" class="ng-pristine ng-untouched ng-valid">
                        <label for="redo-waitlist-all">To Waiting List</label>
                    </div>
                    <div class="redo__input-label">
                        <input ng-model="vm.sendRedoRequestCtrl.viewModel.redoType" type="radio" id="redo-artworkedit-all" name="redo-option-all" value="2" class="ng-pristine ng-untouched ng-valid">
                        <label for="redo-artworkedit-all">Artwork Edit</label>
                    </div>
                    <div class="redo__input-label">
                        <input ng-model="vm.sendRedoRequestCtrl.viewModel.redoType" type="radio" id="redo-print-all" name="redo-option-all" value="3" class="ng-pristine ng-untouched ng-valid">
                        <label for="redo-print-all">Straight to Print</label>
                    </div>
                </div>

                <div class="redo__reason-group--all">
                    <span class="redo__category--all">
                        <label for="redo-category-all">Redo Category</label>
                        <!-- ngIf: !vm.sendRedoRequestCtrl.viewModel.isLoaded --><select chosen="" data-ng-if="!vm.sendRedoRequestCtrl.viewModel.isLoaded" data-placeholder="Select redo category.." ng-model="vm.sendRedoRequestCtrl.viewModel.redoEntireOrderCategoryId" ng-options="p.Id as p.Name for p in vm.sendRedoRequestCtrl.viewModel.listRedoCategories track by p.Id" ng-change="vm.sendRedoRequestCtrl.changedRedoCategoryRedoEntire(vm.sendRedoRequestCtrl.viewModel.redoEntireOrderCategoryId)" class="ng-pristine ng-untouched ng-valid ng-scope ng-isolate-scope" style="display: none;"><option value="?" selected="selected"></option></select><div class="chosen-container chosen-container-single" style="width: 100%;" title=""><a class="chosen-single chosen-default"><span>Select redo category..</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off"></div><ul class="chosen-results"></ul></div></div><!-- end ngIf: !vm.sendRedoRequestCtrl.viewModel.isLoaded -->
                    </span>
                    <span class="redo__reason--all">
                        <label for="redo-reason-all">Redo Reason</label>
                        <!-- ngIf: !vm.sendRedoRequestCtrl.viewModel.isLoadedReason --><select chosen="" style="width: 80%; display: none;" data-ng-if="!vm.sendRedoRequestCtrl.viewModel.isLoadedReason" data-placeholder="Select redo reason.." ng-model="vm.sendRedoRequestCtrl.viewModel.redoEntireOrderReasonId" ng-options="cr.Id as cr.Name for cr in vm.sendRedoRequestCtrl.viewModel.listRedoReasons track by cr.Id" class="ng-pristine ng-untouched ng-valid ng-scope ng-isolate-scope"><option value="?" selected="selected"></option><option label="Sent to wrong person" value="8">Sent to wrong person</option></select><div class="chosen-container chosen-container-single" style="width: 100%;" title=""><a class="chosen-single chosen-default"><span>Select redo reason..</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off"></div><ul class="chosen-results"></ul></div></div><!-- end ngIf: !vm.sendRedoRequestCtrl.viewModel.isLoadedReason -->
                    </span>
                </div>


            </div>


            <div class="redo__action">
                <!-- ngIf: vm.sendRedoRequestCtrl.viewModel.showValidation === true -->
                <a href="" class="btn" ng-click="vm.sendRedoRequestCtrl.saveRedoRequest()">Redo Entire Order</a>
            </div>

        </div>

        <div ng-show="vm.sendRedoRequestCtrl.viewModel.isRedoEntireOrder === false">
            <div class="redo__option">
                <h3 class="redo__order-num ng-binding">Order Number 1434467</h3>
                <div class="redo__option-all">
                    <div class="redo__input-label">
                        <input ng-model="vm.sendRedoRequestCtrl.viewModel.redoType" type="radio" id="redo-waitlist" value="1" class="ng-pristine ng-untouched ng-valid" name="49">
                        <label for="redo-waitlist">To Waiting List</label>
                    </div>
                    <div class="redo__input-label">
                        <input ng-model="vm.sendRedoRequestCtrl.viewModel.redoType" type="radio" id="redo-artworkedit" value="2" class="ng-pristine ng-untouched ng-valid" name="50">
                        <label for="redo-artworkedit">Artwork Edit</label>
                    </div>
                    <div class="redo__input-label">
                        <input ng-model="vm.sendRedoRequestCtrl.viewModel.redoType" type="radio" id="redo-print" value="3" class="ng-pristine ng-untouched ng-valid" name="51">
                        <label for="redo-print">Straight to Print</label>
                    </div>
                </div>
            </div>



                        <ul class="job-item__redo">
                            <li class="redo__qty">
                                <label for="redo-qty-item-1">Quantity</label>
                                <select style="min-width: 100px;" ng-model="redoItem.RedoQty" ng-options="quantity as quantity for quantity in vm.sendRedoRequestCtrl.getReoJobQuantity(redoItem.Quantity)" class="ng-pristine ng-untouched ng-valid"><option label="1" value="number:1">1</option></select>
                            </li>
                            <li class="redo__category">
                                <label for="redo-category-item-1">Redo Category</label>
                                <select chosen="" data-placeholder="Select redo category.." data-ng-model="redoItem.SelectedCategoryId" data-ng-options="p.Id as p.Name for p in vm.sendRedoRequestCtrl.viewModel.listRedoCategories track by p.Id" data-ng-change="vm.sendRedoRequestCtrl.changedRedoCategory(redoItem)" class="ng-pristine ng-untouched ng-valid ng-isolate-scope" style="display: none;"></select><div class="chosen-container chosen-container-single" style="width: 100%;" title=""><a class="chosen-single chosen-default"><span>Select redo category..</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off"></div><ul class="chosen-results"></ul></div></div>
                            </li>
                            <li class="redo__reason">
                                <label for="redo-reason-item-1">Redo Reason </label>
                                <!-- ngIf: !redoItem.isLoaded --><select style="width: 80%; display: none;" chosen="" data-ng-if="!redoItem.isLoaded" data-placeholder="Select redo reason.." data-ng-model="redoItem.selectedReasonId" data-ng-options="c.Id as c.Name for c in redoItem.listRedoReasons" class="ng-pristine ng-untouched ng-valid ng-scope ng-isolate-scope"><option label="Bad gluing" value="number:50">Bad gluing</option><option label="Bad cutting" value="number:51">Bad cutting</option></select><div class="chosen-container chosen-container-single" style="width: 100%;" title=""><a class="chosen-single chosen-default"><span>Select redo reason..</span><div><b></b></div></a><div class="chosen-drop"><div class="chosen-search"><input type="text" autocomplete="off"></div><ul class="chosen-results"></ul></div></div><!-- end ngIf: !redoItem.isLoaded -->
                            </li>
                        </ul>

                    </div>
                    <!-- ngIf: $index > 0 -->
                </li>
            </ul>


        </div>
    </div>
</div>
<!-- end ngIf: vm.viewModel.redoPoup === true -->

Answer 1

你的XPath表达式似乎不正确，因为没有提供通配符。你可以尝试在你的脚本中添加一些睡眠。

WebElement element = driver.findElement(By.xpath("//*[@class='redo__reason']//*[contains(@class, 'chosen-container')]"));
((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", element);
Thread.sleep(5000); 
Driver.MoveToElement(element);
Thread.sleep(5000); 
Driver.Click(element);

类似于 "预期条件 "的东西可能会更优雅。

new WebDriverWait(driver, TimeSpan.FromSeconds(5)).Until(ExpectedConditions.ElementToBeClickable(By.XPath("//*[@class='redo__reason']//*[contains(@class, 'chosen-container')]"))).Click()