[Protractor] Test Simple Binding With Protractor

Protractor is built to interact with AngularJS applications. In this lesson, we will take a look at how Protractor interacts with the application using its element and finder functions.

 

The index.html

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>E2E Testing</title>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body ng-app="app">
    <div ng-controller="AppCtrl as vm">
        <div class="row text-center">
            <a class="btn btn-primary"
               id="button1"
               ng-click="vm.updateMessageText('button 1 clicked')">
                Button 1
            </a>
        </div>

        <div class="row h3 text-center">{{ vm.messageText }}</div>
    </div>
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/angular/angular.min.js"></script>
    <script src="app.js"></script>
</body>
</html>
复制代码

 

app.js:

复制代码
angular.module('app', [])

    .controller('AppCtrl', function (){
        var vm = this;

        vm.updateMessageText = function (text){
            vm.messageText = text;
        }
    });
复制代码

 

index.spec.js:

复制代码
describe('Simple page test', function() {
    it('Should get title of the page', function() {
        browser.get('http://127.0.0.1:8080');
        expect(browser.getTitle()).toBe('E2E Testing');
    });

    it('should update the button text when click the button', function(){
        var button = element(by.id('button1')),
            message = element(by.binding('vm.messageText'));

            button.click();

            expect(message.getText()).toBe('button 1 clicked');
    })
});
复制代码

 

 

RUN:

webdriver-manager start

protractor protractor.conf.js

 

posted @   Zhentiw  阅读(295)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
历史上的今天：
2014-11-23 [ES6] 15. Generators -- 2
2014-11-23 [ES6] 14. Generator -- 1. yield & next()
2014-11-23 [ES6] 13. Using the ES6 spread operator ...
2014-11-23 [ES6] 12. Shorthand Properties in ES6
点击右上角即可分享
微信分享提示
AI IDE Trae