e2e test with ripple emulate

ionic-v1
1

Hello, I following http://learn.ionicframework.com/formulas/Protractor/ to setup e2e test with ripple emulate, but i got “ElementNotVisibleError: element not visible” from protractor. Anyone can give a hints to me to solve it? Many thanks.

becomeAwesome.spec.js

  it('should become awesome', function() {
    element(by.id('becomeAwesome')).click();
  });

my template html as below

 <p id='awesomeStatus'>I am not awesome</p>
    <button id='becomeAwesome'>Awesome</button>
  </div>
  <script type='text/javascript'>
    $('#becomeAwesome').on('click', function() {
      $('awesomeStatus').html('I am awesome')
    });
  </script>
2

Solved, I changed the html as below and move the button fit into the ripple emulator, thanks.:

<html>
	<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
	<body>
		<p id='awesomeStatus'>I am not awesome</p>
		<button id='becomeAwesome'>Awesome</button>
	</body>
	<script type='text/javascript'>
		$('#becomeAwesome').on('click', function(){
			$('#awesomeStatus').text('I am awesome')
		});
	</script>
</html>