Forum Discussion

blimden's avatar
blimden
Occasional Contributor
6 years ago
Solved

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...
  • Wamboo's avatar
    Wamboo
    6 years ago

    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.

     

  • Wamboo's avatar
    Wamboo
    Community Hero
    6 years ago

    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.

    • blimden's avatar
      blimden
      Occasional Contributor
      6 years ago

      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?

      • Wamboo's avatar
        Wamboo
        Community Hero
        6 years ago

        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.