MarketSquare / robotframework-angularjs

An AngularJS and Angular extension to Robotframework's SeleniumLibrary
Apache License 2.0
34 stars 20 forks source link

Failure to find root selector hould have specific error message #29

Closed emanlove closed 5 years ago

emanlove commented 5 years ago

The following robot script

*** Settings ***
Documentation     Test use of AngularJSLibrary.
Library           SeleniumLibrary
Library           AngularJSLibrary

*** Variables ***
${BROWSER}        Chrome
${URL}            https://clarity.design/
${GETSTARTED}     //*[@id="body"]/app-root/clr-main-container/home/main/section[1]/div[1]/div/a[1]

*** Keywords ***
Visit Angular Site
    Open Browser    ${URL}    ${BROWSER}

Click Get Started
    Click Element    ${GETSTARTED}
    Sleep    5 seconds

*** Test Cases ***
Visit Angular Site
    Visit Angular Site

Click Get Started
    Click Get Started

results in the following error

WebDriverException: Message: unknown error: Could not find testability for element.

The issue, as pointed out by Hélio Guilherme, is that the root selector is not the library default, [ng-app], but instead the site clarity.design uses [ng-version]. Thus the issue in the script above was solved by specifying the root on the library import, as in

...
Library           AngularJSLibrary    root_selector=[ng-version]
...

The error message given is not at all helpful when it could be. The acceptance criteria is when the root locator is not found give a meaningful error.

emanlove commented 5 years ago

It would also be helpful to have some documentation about the root selector and how one can find the root selector for the website they are testing.

emanlove commented 5 years ago

This has been fixed in AngularJSLibrary release 0.0.10.

uvelayut commented 5 years ago

Hi Emanlove, I am using the latest version 0.10 but still hitting the same problem. Can you help me on how to get the root_selector any webpage ?

JavascriptException: Message: javascript error: Unable to find root selector using "[ng-app]". Please refer to the AngularJS library documentation for more information on how to resolve this error. (Session info: chrome=76.0.3809.100)

emanlove commented 5 years ago

@uvelayut If is a public facing website and you can send the url I might be able to take a look.

subanandhini commented 3 years ago

@uvelayut If is a public facing website and you can send the url I might be able to take a look.

I am facing the same issue for this website https://angularjs.org/

Library AngularJSLibrary root_selector=[ng-app] JavascriptException: Message: javascript error: Unable to find root selector using "[ng-app]". Please refer to the AngularJS library documentation for more information on how to resolve this error.

Library AngularJSLibrary root_selector=[ng-version] JavascriptException: Message: javascript error: Unable to find root selector using "[ng-version]". Please refer to the AngularJS library documentation for more information on how to resolve this error.

emanlove commented 3 years ago

@subanandhini It looks like the root_selector for https://angularjs.org is [ng-controller]. Here is my test case


*** Settings ***
Library  SeleniumLibrary
Library  AngularJSLibrary    root_selector=[ng-controller]

*** Variables ***
${LearnMenu}   css:#navbar-main ul.nav li.dropdown:nth-of-type(1)

*** Test Cases ***
Try ng.org
   Open Browser  https://angularjs.org/  Firefox
   Click Element   ${LearnMenu}
`
emanlove commented 3 years ago

I got this from the page source

<!doctype html>
<!-- ... -->
<head>
  <!-- ... -->
  <title>AngularJS — Superheroic JavaScript MVW Framework</title>
</head>
<body ng-controller="AppController" class="homepage">
  <!-- ... -->
  <header class="header">
    <nav id="navbar-main" class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <h1 class="brand"><a href="https://angularjs.org"><img width="117" height="30" src="img/angularjs-for-header-only.svg" alt="AngularJS"></a></h1>
          <!-- ... -->

From the \ element, using a css selector to describe the attribute of that element. In particular the ng-controller attribute.