Changing the CSS using MS Script

[uniadv]

Hi,

I am stuck with a problem, there is a particular div ("scroll-wrapper") whose style changes on scrolling.

Style by default:

Code: Select all

<div class="scroll-wrapper" style="transform: translate(0px, 0px) translateZ(0px);">

Style on scrolling:

Code: Select all

<div class="scroll-wrapper" style="transform: translate(0px, -500px) translateZ(0px);">

The the value of Y coordinate keep on going negative on scroll. I want to scroll it to certain different positions to perform different actions. I am using ChromeDriver to perform tasks.
Is there any way i can change the style using script?

I was thinking something like this:

Code: Select all

<div class="scroll-wrapper" style="transform: translate(0px, -%n%px) translateZ(0px);">

Regards,
Ushahra

[uniadv]

Hi,

I have figure out the way to use JavaScript inside Console to change the CSS of different class.

Code: Select all

//Open Developer Tool: press f12
Press f12
wait>0.5
//Open Console Tab: press Esc
Press Esc
wait>0.5
//Using ScrollIntoView to scroll to the certain DIV element 
Send>document.getElementsByClassName('viewable-monitor')[16].scrollIntoView(true);
wait>0.2
Press Enter

I have a question, is there any way to insert JavaScript directly into browser so i can avoid the extra step of opening Google Console?

Regards,
Ushahra

PS: After using MS 15 for a month on free trial, finally I have purchased its subscription. Its most amazing software and best community I have ever found on the Internet. ♥♥♥

[Marcus Tettmar]

This post shows how to inject and execute javascript in a Chrome session opened with ChromeStart.

[uniadv]

Hi,
I have successfully injected the JavaScript inside the browser to use function like ScrollIntoView(), click() or change any CSS.
Getting data using ChromeGetElementData> always works but for some element i need to extract data from Chrome's DevTool Console. I'm getting text inside the Console using the following code {Chrome Command Line}

Code: Select all

> document.getElementsByClassName('Fx4vi')[2].textContent;

This return the value:{Chrome Command Line}

Code: Select all

< "Settings"

Later that output can be transferred to clipboard using the following command(which copy the last output form DevTool command line:{Chrome Command Line}

Code: Select all

> copy($_)

Here is element's code:

Code: Select all

<a class="Fx4vi" href="https://www.google.com/preferences?hl=en" id="fsettl" aria-controls="fsett" aria-expanded="false" aria-haspopup="true" role="button" jsaction="foot.cst" ping="/url?sa=t&amp;rct=j&amp;source=webhp&amp;url=https://www.google.com/preferences%3Fhl%3Den&amp;ved=0ahUKEwjuxtb408nrAhVMzDgGHatsDOYQzq0CCBw">Settings</a>

I used the following code for inject the script to browser to get text directly from the DevTool Console but this doesn't giving out the result:

Code: Select all

GoSub>ExecuteJS,s1,document.getElementsByClassName('Fx4vi')[2].textContent;
wait>0.4
GoSub>ExecuteJS,s1,copy($_)
wait>0.4
GetClipBoard>myresult,0
wait>0.4
MessageModal>%myresult%

Any help with this.

[Marcus Tettmar]

You're just referencing an element by classname and then using the second match.

So the equivalent would be:

ChromeFindElements>session_id,class name,Fx4vi,elements

And then use elements_2

See:
https://www.mjtnet.com/manuals/v15/HTML ... ments.html

[uniadv]

It didn't work. Here is the code:

Code: Select all

//Chrome Example
Let>CHROMEDRIVER_EXE=c:\chromedriver.exe
ChromeStart>session_id
ChromeNavigate>session_id,url,https://www.google.com/
wait>0.2
ChromeFindElements>session_id,class name,Fx4vi,elements
ChromeGetElementData>session_id,elements_2,text,strResult
MessageModal>%strResult%

Even under debugger its empty





Its returning MessageModel empty. Am i doing anything wrong?

[Marcus Tettmar]

Try this:

Code: Select all

ChromeFindElements>session_id,xpath,//a[@class='Fx4vi'],elements