How to change the html tag attribute at the time of executing the script

How to change the html tag attribute at the time of executing the script.

From <div class=“hide”> to <div class="">

<div class="hide">
   <input myformatholder="PWCMasterPage_PWCWebPartManager_gwpBookingDeatilsLinksFr1_BookingDeatilsLinksFr1_txtUploadFile_formatHolder" type="file" name="PWCMasterPage$PWCWebPartManager$gwpBookingDeatilsLinksFr1$BookingDeatilsLinksFr1$PWCUploadFile" id="PWCMasterPage_PWCWebPartManager_gwpBookingDeatilsLinksFr1_BookingDeatilsLinksFr1_PWCUploadFile" contenteditable="false" onchange="if(UpdateNewFileName()){return false;};"><input type="submit" name="PWCMasterPage$PWCWebPartManager$gwpBookingDeatilsLinksFr1$BookingDeatilsLinksFr1$PWCUploadFile$ctl00" value="" class="PWCButton" devcalledactionid=""><br>
   <br>
</div>

The only way to do that is to use JavaScript. However…

You should not do this. You should try to automate user actions, not modify the AUT to aid testing. If the page is untestable at that point, inform the developers.

If you insist this is the only way, I’ll give you the JavaScript.

1 Like

@Russ_Thomas … Please share the javascript

I tried the below in chrome console, but didn’t work.

document.querySelector(“div[class=‘hide’]”).setAttribute(‘class’,‘none’)

// THIS IS BAD PRACTICE!!!
js = 'document.querySelector("div.hide").classList.remove("hide");'
WebUI.executeJavaScript(js, null);

The above assumes there is ONLY ONE such div element.

Hi Russ, nothing happens

image

Ignore the “undefined” response. That just means the function returns nothing.

If you have a collection of div.hide, you’ll need to figure out a better selector to nail the correct one. Try this:

js = 'document.querySelector("#PWCMasterpage_blahblahblah").classList.remove("hide");'
WebUI.executeJavaScript(js, null);

Obviously, put the correct id in there.

If that id is dynamic, show me more of the HTML so I can find something better to target the div. OR perhaps only part of the id is dynamic, in which case we can usually work with the non-dynamic part.

Let me know.

Attached the html for your reference.

Upload.html (8.8 KB)

ID is not dynamic. If I remove the div tag - class attribute value i.e. hide, only then I am able to the see the choose file button. There by I can upload the document using inbuilt katalon keyword or sendKeys.

Java Robot class and Auto IT is very inconsistent.

Have you tried clicking that button from JavaScript?

You may not need to mess with the class attribute.

I’d still suggest you try to automate user actions, though.

Yes … I am able to click the "Choose File’’ button using Javascript executor

document.querySelector(“input[name=‘PWCMasterPage$PWCWebPartManager$gwpBookingDeatilsLinksFr1$BookingDeatilsLinksFr1$PWCUploadFile’]”).click()

On the other hand to see the button –> "Choose File’’, I have to manipulate the attribute i.e.

<div class=“ hide ”> to <div class="">

So your problem is solved? Or are we just trading questions and answers? :rofl:

Nope … the problem is not solved.

Unable to achieve the below using JavaScript executor.

<div class=“ hide ”> to <div class="">

I tried all the solutions provided by you … but I am unable to remove the class attribute i.e, hide.
Only then I will be able to see the button –> " Choose File ’’

Hope I am clear. Thanks

Then you probably have more than one div.hide.

Put this in the browser console and let me know the result

document.querySelectorAll("div.hide").length

So, like I said…

Now show me what this returns:

document.querySelectorAll("div.row-fluid").length

If it’s greater than 1, I need MORE html.

Actually, let’s try using the CSS sibling-combinator selector…perhaps this will work:

String js = '''
var selector = "#PWCMasterPage_PWCWebPartManager_gwpBookingDeatilsLinksFr1_BookingDeatilsLinksFr1_t xtUploadFile_formatHolder + div.hide";
document.querySelector(selector).classList.remove("hide");
'''
WebUI.executeJavaScript(js, null);

A note to the casual reader…

This solution is a bad practice. It is not recommended to modify the AUT for testing purposes.

2 Likes

image

Upload_2.html (493.0 KB)

Did you try my previous?

I will check and get back to you.

1 Like

Thanks a ton @Russ_Thomas. This works perfectly.

I have a doubt, In your code snippet you have used the the myformatholder attribute, But if I use the ID attribute, It doesn’t work …

True, but that is the id of the first-sibling div and that is how we are targeting the correct div.hide.