Search code examples
wallaby

How can I get text from invisible label by using wallaby code?


I have invisible text label and I can't get the text from it.

the elements are a list of rows like these:

<datatable-body-cell tabindex="-1" class="datatable-body-cell 
  sort-active" style="width: 178.667px; height: 67px;">
  <div class="datatable-body-cell-label">
      <label _ngcontent-c13="" class="m-0 visible-element" 
       id="visible_element">
      example
      </label>

    <label _ngcontent-c13="" class="m-0 invisible-element" 
     id="invisible_element" style="z-index: -1; display: none">
    invisible label
    </label>
  </div>
</datatable-body-cell>

I tried:

session
|> find(css(".datatable-row-wrapper", count: :any))  
|> Enum.each(fn element ->
   Wallaby.Browser.find(element, (
     css("#invisible_element", visible: false)))
     |> Element.text()
     |> IO.inspect()
     end)

I expected the output to be "invisible label", but the actual output is ""


Solution

  • I got a solution from github:

    session
    |> find(css(".datatable-row-wrapper", count: :any))
    |> Enum.each(fn element ->
            Element.attr(find(element, css("#test_test", visible: false)), "innerHTML")
            |> Element.text()
            |> IO.inspect()
          end)
    

    this got me the invisible text