cancel
Showing results for 
Search instead for 
Did you mean: 

Can't catch change at CSS/JS element

SOLVED
Highlighted
Occasional Contributor

Can't catch change at CSS/JS element

Hello, I need to catch button changes after user click on it. I have setup automatisation that click on this button, but I can't catch that it changes. To html tag button by JS adding "style='display: none'", and background became black. TeamLead say that I should realize Test without html check, can someone explain how I can do this with TestComplete?

 

Please help.

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Community Leader

Re: Can't catch change at CSS/JS element

The function responsible for adding .copied class on the page can be found in the console:

its content is this:

 

var clpMainPmcode = new ClipboardJS('.copy-btn-bonus');
var tooltip = '<span id="tooltiptext">u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u043D\u043E!</span>';
clpMainPmcode.on('success', function(s) {
    $('.copy-btn-bonus').addClass('copied');
    $('#go').addClass('bold-text');
    $('.pm-code-inr').append(tooltip);

    setTimeout(function() {
        $('#tooltiptext').remove();
    }, 4000);
});

 

1) read the documentation and write your JS -> function using e.g. jquery (to retrieve the newly displayed item) and do whatever you think with it.

 

Doc link: https://support.smartbear.com/testcomplete/docs/app-testing/web/common-tasks/javascript.html#HowTo

 

2) Press the button and type in the console:

var module = $(".copied"); // by classname
console.log(module)

you will receive an object in an inspiration that contains the item. Check screen.

 

View solution in original post

6 REPLIES 6
Community Manager

Re: Can't catch change at CSS/JS element

Thank you for posting your question, let's see if the Community can help here.

 

@anupamchampati @Wamboo @tristaanogre @Reshail any ideas?🙂


Sonya Mihaljova
Community and Education Specialist

Learn SmartBear products in a fun and easy way and prove your knowledge!
>>Participate in the TechCorner Challenge today
Highlighted
Community Leader

Re: Can't catch change at CSS/JS element

Hi,

 

1) display: none;

I do not cause the html element to physically disappear from the DOM of the indicated url. This element will not be visible on the screen but in which page structure (under F12) in the console.

 

If you're using NameMapping, refresh the structure of the mapped elements before you can trace the element again.

 

That is:

2) NameMapping

 

var myElement = Aliases.button1.button2.click()

after this operation, let's say the button disappears and the property you mapped (theoretically) also changes

Then use .refreshMappingInfo() on the myElement and you will have the element with the current properties after the action.

 

3) ObjectBrowser

You can also search for items directly in the "Object Browser" panel of the selected browser. See this option.

Highlighted
Occasional Contributor

Re: Can't catch change at CSS/JS element

The situation has changed slightly over time. The moderator removed the site, but unfortunately, without a specific example, you will not understand what the matter is, on this page there is this button.copy-btn-bonus.copied, when you click it, an element <span> appears, and after a while it disappears. It works with JS and in fact nothing changes in HTML, changes occur in the DOM structure, I tried use .refreshMappingInfo() but he doesn't see the element and with ObjectBrowser I can't catch it either. Any ideas? Perhaps TestComplete will not be able to cope with this task?

Highlighted
Community Leader

Re: Can't catch change at CSS/JS element

The function responsible for adding .copied class on the page can be found in the console:

its content is this:

 

var clpMainPmcode = new ClipboardJS('.copy-btn-bonus');
var tooltip = '<span id="tooltiptext">u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u043D\u043E!</span>';
clpMainPmcode.on('success', function(s) {
    $('.copy-btn-bonus').addClass('copied');
    $('#go').addClass('bold-text');
    $('.pm-code-inr').append(tooltip);

    setTimeout(function() {
        $('#tooltiptext').remove();
    }, 4000);
});

 

1) read the documentation and write your JS -> function using e.g. jquery (to retrieve the newly displayed item) and do whatever you think with it.

 

Doc link: https://support.smartbear.com/testcomplete/docs/app-testing/web/common-tasks/javascript.html#HowTo

 

2) Press the button and type in the console:

var module = $(".copied"); // by classname
console.log(module)

you will receive an object in an inspiration that contains the item. Check screen.

 

View solution in original post

Highlighted
Community Hero

Re: Can't catch change at CSS/JS element

Hi,

 

In addition to what was suggested by @Wamboo, here is an article from Support that might inspire you with ideas: https://support.smartbear.com/articles/testcomplete/embedding-scripts-into-web-pages/

 

Regards,
  /Alex [Community Hero]
____
[Community Heroes] are not employed by SmartBear Software but
are just volunteers who have some experience with the tools by SmartBear Software
and a desire to help others. Posts made by [Community Heroes]
may differ from the official policies of SmartBear Software and should be treated
as the own private opinion of their authors and under no circumstances as an
official answer from SmartBear Software.
The [Community Hero] signature is used with permission by SmartBear Software.
https://community.smartbear.com/t5/custom/page/page-id/hall-of-fame
================================
Highlighted
Occasional Contributor

Re: Can't catch change at CSS/JS element

I am very grateful to everyone who participated in helping to solve my problem!

New Here?
Join us and watch the welcome video:
Announcements
Join TechCorner Challenge!
Want a fun and easy way to learn TestComplete? Try solving weekly TechCorner challenges and get into the Leaderboard!


Challenge Status

Compare images using the Region Checkpoint

See replies!

Converting UTC TimeDate in an Excel file

See replies!

Compare HTML table with Excel file and correct data in Excel file

Participate!

How to execute remote test and obtain results via Test Runner REST API

Participate!
Top Kudoed Authors