angularjs - SweetAlert 按钮未正确单击 - Angular/Protractor

Question

我正在对我正在开发的 Angular 应用程序运行一些 CRUD 功能测试。它背后的基本思想是有 3 个按钮。创建、编辑和删除。请记住，所有这些功能都在 UI 中运行。创建和编辑按钮打开模式并提交信息。提交该信息后，会弹出一个 SweetAlert，告诉用户它已成功，然后测试单击 OK 按钮。它适用于这 2 个。

但是，“删除”按钮存在问题。当它被点击时，它会进入一个屏幕，您可以在其中选择 (.cancel) 按钮和 (.confirm) 按钮。它找到了按钮，但出于某种原因没有执行 .click() 。所以我可以创建/编辑内容但不能删除它，因为这个按钮不会点击。知道为什么吗？

这是警报的图片: http://i988.photobucket.com/albums/af6/jtbitt/sweetalert_zps7na0nsua.png

下面是这个特定页面的测试:

describe('Main CRUD Banners Page', function() {

  var create_edit = element.all(by.model('vm.create'));
  var remove = element.all(by.css('button[ng-  click="vm.deleteMainBanner(banner)"]'));
  var modal_title = element(by.css('.modal-header h3'));
  var name = element(by.css('input[placeholder="Name"]'));
  var author = element(by.css('input[placeholder="Author"]'));
  var title = element(by.css('input[placeholder="Title"]'));
  var date = element(by.css('input[placeholder="Date"]'));
  var submit = element(by.css('button[ng-click="vm.submit()"]'));
  var submit_confirmation = element(by.css('p[style="display: block;"]'));
  var button_confirmation = element(by.css('.confirm'));
  var new_banner_name = element.all(by.binding(' banner.name ')).last();
  var new_banner_author = element.all(by.binding(' banner.author ')).last();
  var delete_confirm = element(by.buttonText('Yes Delete'));

  function createContent(test_name, test_author, test_title, test_date) {
      name.sendKeys(test_name);
      author.sendKeys(test_author);
      title.sendKeys(test_title);
      date.sendKeys(test_date);
      submit.click();
  }

  beforeEach(function(){
      browser.get('http://localhost:3444/ind_page/content/mainbanner');
  });

  it('should be logged in on main banner page', function(){
      expect(element(by.binding(' app.username   ')).getText()).toContain('jonathan');
     expect(browser.getCurrentUrl()).toMatch('http://localhost:3444/ind_page/content/mainbanner');
  });

  it('should open a create modal and submit main banner content',   function(){
      create_edit.first().click();
      //expect(modal_title.getText()).toBe('Create Content');
      createContent('test_banner', 'jay', 'Get Fit, Make Money', '12/14/15');
      expect(submit_confirmation.getText()).toContain('Complete');
      button_confirmation.click();
      expect(new_banner_name.getText()).toBe('test_banner');
  });

  it('should open an edit modal and submit changes to main banner content', function(){
      create_edit.last().click();
      //expect(modal_title.getText()).toBe('test_banner');
      author.clear().sendKeys('test_author');
      submit.click();
      expect(submit_confirmation.getText()).toContain('Complete');
      button_confirmation.click();
      expect(new_banner_author.getText()).toBe('test_author');
  });

  it('should delete main banner content', function(){
      remove.last().click()
      expect(submit_confirmation.getText()).toContain('You will not be able to recover this record');
      delete_confirm.click();
      expect(submit_confirmation.getText()).toContain('The record has been deleted');
      button_confirmation.click();
  });

});

HTML -

<div class="panel panel-primary">
    <div class="panel-heading banner-title">Main Banners Posted</div>
    <div class="panel-body" style="height:420px;overflow:auto">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Image</th>
                    <th>Author</th>
                    <th>Date</th>
                    <th><a ng-click="vm.create=true;vm.fields[0].disabled=false;vm.mainBannerManagement()"
                        ng-model="vm.create">
                        <span class="glyphicon glyphicon-plus"></span>
                    </a>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="banner in vm.main_banners | orderBy: 'name'">
                <td>{{ banner.name }}</td>
                <td>{{ banner.thumbnail_picture_url }}</td>
                <td>{{ banner.author }}</td>
                <td>{{ banner.date }}</td>
                <td>
                    <button ng-click="vm.create=false;vm.fields[0].disabled=true;vm.mainBannerModelUpdate(banner);vm.mainBannerManagement()"
                            ng-model="vm.create"
                            type="button" class="btn btn-primary">
                        <span class="glyphicon glyphicon-eye-open"></span>
                    </button>
                    <button ng-click="vm.deleteMainBanner(banner)" class="btn btn-danger">
                        <span class="glyphicon glyphicon-trash"></span>
                    </button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

JS文件中的Alert函数-

vm.deleteMainBanner = function(model) {
    SweetAlert.swal({
        title: 'Delete: Are you sure?',
        text: 'You will not be able to recover this record',
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#DD6B55',
        confirmButtonText: 'Yes Delete',
        cancelButtonText: 'Cancel',
        closeOnConfirm: false,
        closeOnCancel: false
    },
    function(isConfirm){
        if(isConfirm === true){
            var u = new Generic('content', model.name);
            u.delete();
            SweetAlert.swal('Deleted!', 'The record has been deleted', 'success');
            console.log('hi im deleting shit');
            $state.reload();
        }
        else{
            SweetAlert.swal('Cancelled', 'Cancelled Deletion', 'error');
        }
    });
}

Answer 1

也许您的 Protractor 试图在警报呈现完成之前点击。你能显示错误信息吗？

您应该尝试为您的模态警报提供一个 id，并等待它在 Protractor 的预期条件下可见(如下所示)，或者等待删除按钮可点击:

var EC = protractor.ExpectedConditions; 
// Do your stuff ... 
// Then wait button to be visible and enabled  
browser.wait(EC.elementToBeClickable(delete_confirm), 5000).then(function(){
    expect(submit_confirmation.getText()).toContain('You will not be able to recover this record');
    delete_confirm.click();
});

请记住， Protractor 是异步工作的，为确保您的所有测试都稳定，请在每次新渲染后等待一个条件。否则您可能会遇到加载程序或背景的问题。

var myBackdrop = element(by.id(backdropId));
browser.wait(EC.invisibilityOf(myBackdrop), 5000);

看看这个页面，这可以解决大部分端到端测试中的随机失败。 https://angular.github.io/protractor/#/api?view=ExpectedConditions

---

如果问题仍然存在，请使用以下技巧之一:

delete_confirm.click().click();
// or 
browser.executeScript("arguments[0].scrollIntoView();", delete_confirm);
// or
browser.actions().mouseMove(delete_confirm).click().perform();