How to use protractor to check if an element is visible

Question

I m trying to test if an element is visible using protractor  Here s what the element looks like    lt i class  icon-spinner icon-spin ng-hide  ng-show  saving  gt  lt  i gt    When in the chrome console  I can use this jQuery selector to test if the element is visible       ng-show saving  icon-spin      lt i class   icon-spinner icon-spin ng-hide  ng-show   saving  gt   lt  i gt      gt      ng-show saving  icon-spin visible        However  when I try to do the same in protractor  I get this error at runtime   InvalidElementStateError   invalid element state  Failed to execute  querySelectorAll  on  Document      ng-show saving  icon-spin visible  is not a valid selector    Why is this not valid  How can I check for visibility using protractor

User · Accepted Answer

This should do it   expect     ng-show saving  icon-spin   isDisplayed    toBe true     Remember protractor s   isn t jQuery and  visible is not yet a part of available CSS selectors   pseudo-selectors  More info at https   stackoverflow com a 13388700 511069

User · Answer

This answer will be robust enough to work for elements that aren t on the page  therefore failing gracefully  not throwing an exception  if the selector failed to find the element   const nameSelector     data-automation  name-input     const nameInputIsDisplayed        gt        return    nameSelector  count            then count   gt  count     0    it  should be displayed        gt        nameInputIsDisplayed   then isDisplayed   gt            expect isDisplayed  toBeTruthy

User · Answer

If there are multiple elements in DOM with same class name  But only one of element is visible   element all by css   text-input-input    filter function ele           return ele isDisplayed           then function filteredElement           filteredElement 0  click              In this example filter takes a collection of elements and returns a single visible element using isDisplayed

User · Answer

Here are the few code snippet which can be used for framework which use Typescript  protractor  jasmine  browser wait until visibilityOf OversightAutomationOR lblContentModal   3000   Modal text is present         Asserting a text  OversightAutomationOR lblContentModal getText   then text   gt                        this assertEquals text toString   trim    AdminPanelData lblContentModal                            Asserting an element     expect OnboardingFormsOR masterFormActionCloneBtn isDisplayed    to eventually equal true          OnboardingFormsOR customFormActionViewBtn isDisplayed   then  isDisplayed    gt                            expect isDisplayed  to equal true                            Asserting a form  formInfoSection getText   then  text    gt                            const vendorInformationCount   text 0  split   n                            let found   false                          for  let i   0  i  lt  vendorInformationCount length  i                                  if  vendorInformationCount i      customLabel                                    found   true                                                                                    expect found  to equal true

User · Answer

The correct way for checking the visibility of an element with Protractor is to call the isDisplayed method  You should be careful though since isDisplayed does not return a boolean  but rather a promise providing the evaluated visibility  I ve seen lots of code examples that use this method wrongly and therefore don t evaluate its actual visibility   Example for getting the visibility of an element   element by className  your-class-name    isDisplayed   then function  isVisible        if  isVisible               element is visible       else              element is not visible             However  you don t need this if you are just checking the visibility of the element  as opposed to getting it  because protractor patches Jasmine expect   so it always waits for promises to be resolved  See github com angular jasminewd  So you can just do   expect element by className  your-class-name    isDisplayed    toBeTruthy      Since you re using AngularJS to control the visibility of that element  you could also check its class attribute for ng-hide like this   var spinner   element by css  i icon-spin    expect spinner getAttribute  class    not toMatch  ng-hide       expect element to be visible

User · Answer

I had a similar issue  in that I only wanted return elements that were visible in a page object  I found that I m able to use the css  not  In the case of this issue  this should do you     expect    i icon-spinner not  ng-hide    isDisplayed    toBeTruthy      In the context of a page object  you can get ONLY those elements that are visible in this way as well  Eg  given a page with multiple items  where only some are visible  you can use   this visibileIcons       i icon not  ng-hide        This will return you all visible i icons

User · Answer

To wait for visibility  const EC   protractor ExpectedConditions  browser wait EC visibilityOf element by css   icon-spinner icon-spin ng-hide      then function         do stuff      Xpath trick to only find visible elements  element by xpath    i not contains  style  display none    and  class  icon-spinner icon-spin ng-hide

User · Answer

Something to consider  isDisplayed   assumes the element is present  exists in the DOM  so if you do expect     ng-show saving    isDisplayed    toBe true    but the element is not present  then instead of graceful failed expectation      ng-show saving    isDisplayed   will throw an error causing the rest of it block not executed Solution If you assume  the element you re checking may not be present for any reason on the page  then go with a safe way below        element is Present and is Displayed     param     ElementFinder        element       Locator of element     return    boolean     let isDisplayed   function   element      return  await  element isPresent     amp  amp   await  element isDisplayed       and use expect await isDisplayed      ng-show saving       toBe true

User · Answer

element by className  your-class-name    isDisplayed   then function  isVisible    if  isVisible           element is visible   else          element is not visible      catch function err   console log  Element is not found

[angularjs] How to use protractor to check if an element is visible?

Examples related to angularjs

Examples related to visible

Examples related to protractor