Looping through and clicking div elements with partial class name

Product Forums Katalon Studio
,
1

Hello, I have been trying to click (or loop through) every buttons on a webpage which contain the following characters: “lien-”

“lien-” is a partial classname match for the html samples below.

Pseudo Steps to be accomplished using two different webpages; homepage 1 (2 buttons to click ) and homepage 2 (1 button to click):

  1. navigate to homepage 1
  2. Find all buttons with partial classname “lien-”
  3. Click the first button found
  4. Navigate back to the same homepage1
  5. Click the second buttons found
  6. navigate to homepage2
  7. Find all buttons with partial classname “lien-”
  8. Click the only button found with partial classname “lien-”

homepage1 sample:

<section id="grille-blocs-accueil" class="container-commun lazy-background grille-blocs-accueil margin-bottom-100 decalage-haut-70 marges-0 visible">


    <div class="row grilleTroixColonnes">
        <div class="col-med-1-3 Trois-Colonnes-Gauche">




<a class="section-cliquable section-zone-cliquable-epargne-retraite commun-fond-blanc bloc-accueil-texte-bleu-lien-fleche-bleu match-height" href="/aimco/retirement" target="_self" data-utag-type="link" data-utag-name="retirement" data-utag-pos="body" style="height: 382.688px;">





<div class="bloc-contenu bloc-contenu-epargne-retraite ">
<div class="icone-bloc-contenu"><!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" id="c14a588030dc4a9abbjhfgjgf63bb6086e" aria-label="piles-pieces" role="img">
  <title xmlns="">piles-pieces</title>
  <title></title>
  <path d="M24.13 10.559c-3.563 0-7.399-0.984-7.399-3.144v-2.606c0-0.030 0.003-0.060 0.007-0.090-0.004-0.002-0.007-0.026-0.007-0.051 0-2.046 3.716-2.962 7.399-2.962s7.4 0.916 7.4 2.962l-0.007 0.072c0.004 0.008 0.007 0.038 0.007 0.068v2.606c0 2.16-3.836 3.144-7.4 3.144zM18.482 6.685v0.729c0.056 0.321 1.926 1.392 5.647 1.392 3.723 0 5.593-1.071 5.649-1.396l-0.001-0.726c-1.337 0.594-3.411 0.944-5.649 0.944s-4.31-0.35-5.647-0.944zM18.498 4.668c0.237 0.304 1.973 1.21 5.632 1.21 3.66 0 5.395-0.906 5.633-1.21-0.237-0.304-1.972-1.21-5.633-1.21s-5.395 0.906-5.632 1.21z"></path>
  <path d="M24.13 16.692c-3.683 0-7.399-0.953-7.399-3.083v-2.536c0-0.048 0.004-0.097 0.013-0.147-0.009-0.057-0.013-0.090-0.013-0.124 0-0.483 0.393-0.876 0.876-0.876s0.876 0.393 0.876 0.876c0.117 0.23 1.841 1.21 5.647 1.21s5.532-0.98 5.654-1.243c-0.006-0.45 0.387-0.843 0.87-0.843s0.876 0.393 0.876 0.876c0 0.039-0.005 0.076-0.012 0.112 0.005 0.036 0.012 0.098 0.012 0.158v2.536c0 2.13-3.716 3.083-7.4 3.083zM18.482 12.82v0.789c0.089 0.313 1.959 1.332 5.647 1.332s5.559-1.019 5.65-1.343l-0.001-0.779c-1.337 0.594-3.411 0.944-5.649 0.944s-4.31-0.35-5.647-0.944z"></path>
  <path d="M7.612 24.042c-3.564 0-7.399-0.984-7.399-3.144v-2.607c0-0.029 0.003-0.058 0.007-0.086l-0.007-0.054c0-2.046 3.716-2.961 7.399-2.961s7.399 0.916 7.399 2.961l-0.007 0.071c0.004 0.011 0.007 0.039 0.007 0.068v2.607c-0 2.16-3.836 3.144-7.399 3.144zM1.965 20.169v0.729c0.055 0.321 1.925 1.393 5.648 1.393s5.593-1.071 5.648-1.397l-0-0.725c-1.337 0.594-3.41 0.944-5.648 0.944s-4.311-0.35-5.648-0.944zM1.98 18.152c0.237 0.304 1.972 1.21 5.632 1.21s5.396-0.906 5.632-1.21c-0.237-0.304-1.973-1.21-5.632-1.21s-5.395 0.906-5.632 1.21z"></path>
  <path d="M7.612 30.177c-3.683 0-7.399-0.953-7.399-3.083v-2.536c0-0.049 0.004-0.097 0.013-0.147-0.009-0.057-0.013-0.090-0.013-0.124 0-0.483 0.393-0.876 0.875-0.876s0.876 0.393 0.876 0.876c0.117 0.23 1.841 1.21 5.648 1.21s5.531-0.98 5.654-1.244c-0.006-0.449 0.387-0.842 0.87-0.842s0.876 0.393 0.876 0.876c0 0.039-0.005 0.077-0.012 0.114 0.005 0.034 0.012 0.096 0.012 0.157v2.536c0 2.13-3.716 3.083-7.399 3.083zM1.965 26.304v0.79c0.089 0.313 1.96 1.331 5.648 1.331s5.559-1.018 5.649-1.342l-0.001-0.78c-1.338 0.594-3.411 0.944-5.649 0.944s-4.311-0.349-5.648-0.944z"></path>
  <path d="M24.13 23.105c-3.563 0-7.399-0.974-7.399-3.114v-2.571c0-0.039 0.004-0.078 0.009-0.116-0.006-0.037-0.009-0.063-0.009-0.090 0-0.483 0.393-0.875 0.876-0.875s0.876 0.393 0.876 0.875c0.117 0.23 1.842 1.21 5.647 1.21 3.807 0 5.532-0.98 5.654-1.244-0.006-0.449 0.387-0.842 0.87-0.842s0.876 0.393 0.876 0.875c0 0.030-0.004 0.059-0.009 0.088 0.003 0.017 0.009 0.067 0.009 0.118v2.571c0 2.14-3.836 3.114-7.4 3.114zM18.482 19.232v0.759c0.065 0.325 1.889 1.363 5.647 1.363s5.583-1.038 5.649-1.368l-0.001-0.754c-1.337 0.594-3.411 0.944-5.649 0.944s-4.31-0.35-5.647-0.944z"></path>
  <path d="M24.13 29.517c-3.563 0-7.399-0.989-7.399-3.159l0.006-2.69c-0.001 0-0.001 0.001-0.001 0.001-0.003 0-0.005-0.020-0.005-0.041 0-0.483 0.393-0.876 0.876-0.876s0.876 0.393 0.876 0.876c0.117 0.23 1.842 1.21 5.647 1.21 3.807 0 5.532-0.98 5.654-1.243-0.006-0.449 0.387-0.842 0.87-0.842s0.876 0.393 0.876 0.876l-0.007 0.064c-0.001 0 0.007 0.018 0.007 0.043v2.623c0 2.17-3.836 3.159-7.4 3.159zM18.482 25.644v0.714c0.051 0.325 1.913 1.408 5.647 1.408s5.598-1.083 5.649-1.411v-0.71c-1.337 0.594-3.411 0.944-5.649 0.944s-4.31-0.349-5.647-0.944z"></path>
</svg></div>
            <h2 style="height: 78.75px;">Retirement Savings Plan: <br> Discover the benefits of being a&nbsp;member</h2>

    
    <p style="height: 72.75px;">Discover all the benefits of the plan offered.</p>
<span class="lien-chevron-droite">Find out more<span class="icone-chevron"></span></span>


</div>

</a>
            
        </div>
        <div class="col-med-1-3 Trois-Colonnes-Centre">




<a class="section-cliquable section-zone-cliquable-guide commun-fond-blanc bloc-accueil-texte-bleu-lien-fleche-bleu match-height" href="/aimco/retirement/message" target="_self" data-utag-type="link" data-utag-name="retirement" data-utag-pos="body" style="height: 382.688px;">





<div class="bloc-contenu bloc-contenu-guide ">
<div class="icone-bloc-contenu"><svg version="1.1" id="80387c09af574301ae342800216bad91" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="-138 -138 300 300" enable-background="new -138 -138 300 300" xml:space="preserve" aria-label="enveloppe" role="img">
  <title xmlns="">enveloppe</title>
<path d="M112-88H-88c-13.751,0-24.878,11.249-24.878,25L-113,87c0,13.745,11.249,25,25,25h200c13.745,0,25-11.255,25-25V-63  C137-76.751,125.745-88,112-88z M112-38L12,24.5L-88-38v-25L12-0.5L112-63V-38z"></path>
<path fill="none" d="M-138-138h300v300h-300V-138z"></path>
</svg></div>
            <h2 style="height: 78.75px;">Messages from <br>your employer</h2>

    
    <p style="height: 72.75px;">Visit this page .</p>
<span class="lien-chevron-droite">Get the details<span class="icone-chevron"></span></span>


</div>

homepage2 sample:

<div class="col-med-1-3 Trois-Colonnes-Gauche">
        
<div class="commun-bloc-accueil-icone bloc-contenu-colonne-gauche ">
        <a class="liens-accueil" href="/retirement" target="_self" data-utag-type="" data-utag-name="" data-utag-pos="" data-utag-event="" data-utag-dest="" style="height: 370px;">
            <span class="icone-page-coin"></span>
                <div class="accueil-zone-icone" style=""><i class="icone-contenu"></i></div>
            <div class="accueil-zone-text" style="height: 171.75px;">
                                    <h2 style="height: 75px;">Retirement Savings Plans: <br>
Discover the benefits of being <br>a member</h2>

<p style="">Discover all the benefits.</p>            </div>

                <p class="lien-sousligne">Find out more <span class="lien-chevron"></span></p>
        </a>
</div>
    </div>

I’ve tried to use this code, but will throw an error

List<WebElement> elements = WebUI.findWebElements(findTestObject('Object Repository/Page_Home  iA Financial Group/contains_lien'), 5)
println("elements size: " + elements.size())



for(WebElement element : elements) {
	element.click();
	WebUI.delay(2)
	WebUI.navigateToUrl(url) 
	elements = WebUI.findWebElements(findTestObject('Object Repository/Page_Home  iA Financial Group/contains_lien'), 10)
 }

testObject:

image
image886×593 13.9 KB

I also tried:

List<WebElement> elements = WebUI.findWebElements(findTestObject('Object Repository/btnToClick'),	10)

for(WebElement element : elements) {
	element.click();
	WebUI.delay(2)
       WebUI.navigateToUrl(url) 
	elements = WebUI.findWebElements(findTestObject('Object Repository/btnToClick'), 10)
 }

but this I got a similar error:

Reason:
org.openqa.selenium.StaleElementReferenceException: stale element reference: element is not attached to the page document
  (Session info: chrome=98.0.4758.102)
For documentation on this error, please visit: https://www.seleniumhq.org/exceptions/stale_element_reference.html
Build info: version: '3.141.59', revision: 'e82be7d358', time: '2018-11-14T08:25:53'
System info: host: 'QK81744202', ip: '10.204.41.254', os.name: 'Windows 10', os.arch: 'amd64', os.version: '10.0', java.version: '1.8.0_282'

May I get some insight about how I should find and click (loop through) these buttons ? I have to use "class contains ‘lien-’ because there are multiple webpages to test and, the # of elements to click is never the same. But all elements to click have a partial classname match (“lien-”) on each page.

2

i don’t see anything wrong with the example code, however, i do note that the error tries to cast to java.awt.List, while the default List is java.util.List, you may have an import for java.awt.List for a different scenario causing the error

3

thanks, I corrected the import as you suggested and, you are right, the error is different. edited

4

findTestObject is an import that, in my experience, is often removed when trying to fix imports, in which case the import will need to be added manually, please add the following import and let us know if the issue persist
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject

5

thank you! I also added that import and got a different error yet again. Stale Element Reference Exception. I am checking the page that is referenced in the error logs but hmmmm, I can’t say that I understand what to do now to get the script working

6

Your problem is, the elements you collect into a list don’t exist on loop iterations beyond the first, because you collect them before you go into the loop. So the second time around, you’re using Stale Elements.

What causes the elements to go stale?

You navigate away from the page and then navigate back. :boom: Boom. Your original elements don’t exist and the browser creates new elements – the old ones are gone: hence, stale elements!

7

@mgagnequebec

Please answer the following question:

Is it possible that, in the future, there might be 10? 20? buttons with “lien-” in the class attribute?

If your answer is no, or, there will only ever be one or two (or any short number), I would suggest you don’t use a fixed loop, just test the page against the specification for the page. Right now, you’re writing code that is trying to guard against a future change that may (or may not) happen.

Side benefits:

  1. your code will be easier to read and maintain.
  2. your code directly reflects what appears on the page.
  3. you’ll spend less time pulling your hair out.
8

unfortunately I made my case simpler ,for explanations’ sake. But the actual scenario I have to automate is 40 homepages total. Maybe more later. They all have buttons which are matching the criteria “class contains ‘lien-’” but, they are not having much else in common.

One more page example:

<div class="col-1-1" style="">




<div class="bloc-contenu bloc-contenu-bloc-title ">


    
    
<h1>
<span class="surtitre">Minute <br class=""><span class="surtitre-reduce" style=""> Paris</span></span> <br class="">
<span class="titre" style="">CAMPAGNE ANNUELLE <br class=""> AUTO ET HABITATION</span></h1>
<p style="">DU 2 JANVIER AU 8 DÉCEMBRE 2022</p>


</div>



<div class="row bloc-commun-liste-liens liste-liens-ListeDeLiens liste-liens-simples-fleche liste-liens-blanc" style="">


    <div class="col-med-1-3 zone-titre-liste-liens" style="">
        <div class="titre-liste-liens">
            
                <h3 style="">Pour en savoir plus</h3>


        </div>
    </div>

    <div class="col-med-2-3 contenu-liste-liens">
        <ul class="liste-liens" style="">

<li>
        <a href="/concours" target="_self">
            <div class="row">

                <span class="lien-objet" style="">
                    Concours et prix<span class="icone-chevron"></span>
                </span>
            </div>
            <span class="icone-fleche-cta fleche-lien"></span>
        </a>
</li>
<li>
        <a href="/outils" target="_self">
            <div class="row">

                <span class="lien-objet" style="">
                    Outils pour bien performer<span class="icone-chevron"></span>
                </span>
            </div>
            <span class="icone-fleche-cta fleche-lien"></span>
        </a>
</li>
<li>
        <a href="/equipe" target="_self">
            <div class="row">

                <span class="lien-objet" style="">
                    Votre équipe chez iAAH<span class="icone-chevron"></span>
                </span>
            </div>
            <span class="icone-fleche-cta fleche-lien"></span>
        </a>
</li>        </ul>
    </div>
</div>            </div>
9

In future, always post ALL THE INFORMATION. It will save an enormous amount of time.

I’ve provided you with a clear description of your issue. Now you need to figure out how to refresh the elements inside your loop after you return from the linked page. I don’t write code like yours, but I think @grylion54 has examples that might help you.

https://forum.katalon.com/search?expanded=true&q=loop%20stale%20element%20@grylion54

10

You will want to put in a wait statement after returning from your navigateToUrl:

WebUI.navigateToUrl(url) 
WebUI.waitForPageLoad(10)

You might want to add another row to your Object’s Properties giving the new values: Name of “tag” and Value of “a”. This will eliminate the p tags and span tags that are being picked up with your partial class of “lien-”.

So your “new” pathway would become:
//a[contains(@class, "lien-")]