我正在为我正在处理的Angular应用上运行一些CRUD功能测试。它背后的基本思想是有3个按钮。创建，编辑和删除。请记住，所有这些功能都可以在UI中使用。创建和编辑按钮打开模态并提交信息。提交该信息后，会弹出一个SweetAlert，告诉用户它成功，测试点击OK按钮。它适用于这两个。
但是，“删除”按钮存在问题。单击它后，它会进入一个屏幕，您可以在其中选择（.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文件中的警报功能 -
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');
}
});
}
答案 0 :(得分：1)
也许你的量角器试图在完成警报渲染之前点击..你能否显示错误信息？
你应该尝试给你的模态警报一个id，并等待这个从量角器的预期条件可见（例如下面的例子），或者等待删除按钮可点击：
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();
});
请记住量角器正在异步工作，以确保所有测试都稳定，在每次新渲染后等待一个条件。否则你可能会遇到装载机或背景的麻烦。
var myBackdrop = element(by.id(backdropId));
browser.wait(EC.invisibilityOf(myBackdrop), 5000);
看一下这个页面，这可以解决e2e测试中的大多数随机故障。 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();