Forum Discussion

radu's avatar
radu
Occasional Contributor
6 years ago

highlight in screenshot the control to be clicked

 

Dear all,

 

I'm currently working on automating the testing for an web application using Testcomplete's JavaScript. We need small testing reports so I've disabled the Collect Test Visualizer data during test run (and also during recording).

 

There are situations in which we need to take a screenshot before a control is clicked. Can you share with me some code regarding highlighting in a screenshot the control which will be clicked? I'm aware of the following link, but is there any JavaScript equivalent: https://community.smartbear.com/t5/TestComplete-Functional-Web/Is-there-any-way-to-capture-a-screenshot-with-control/td-p/84473

 

Thank you!

R

4 Replies

Sort By
  • tristaanogre's avatar
    tristaanogre
    Esteemed Contributor
    6 years ago

    There is simply "Log.Picture" (https://support.smartbear.com/testcomplete/docs/reference/project-objects/test-log/log/picture.html) which will capture a shot of any componet that you send to it.

     

    For example, if I want a screenshot of Aliases.MyApp.Form1.OKButton, I can do 

     

    Log.Picture(Aliases.MyApp.Form1.OKButton, "Screenshot of OK button on Form1")

    Alternatively, the Log.Message (https://support.smartbear.com/testcomplete/docs/reference/project-objects/test-log/log/message.html) method includes the ability to include a screenshot as well.  

     

    Both of these methods would require you to add code to your existing tests to capture the screenshots on demand.

    • radu's avatar
      radu
      Occasional Contributor
      6 years ago

       

      Hi Robert!

       

      Thank you for your answer and sorry for the late response.

       

      I've tried your indications, and they work, but ... they create an image only for the selected control. What I was trying to get is to have an image with the entire page, which has the specified control highlighted. I need this, because I have pages where identical controls are present (imagine a table with update/delete buttons in the last column for every entry) and I want to show that the correct control was used/called.

       

      I know TestComplete (TC) does these sort of screenshots (if you allow pictures for every action TC performs, but I had to disable this option because the logs are too big), I only need to call/use it when I really need it, not all the time.

       

      Thank you!

      R

      • AlexKaras's avatar
        AlexKaras
        Champion Level 3
        6 years ago

        Hi,

         

        While TestComplete provides Sys.HighlightObject() method, I am not sure if it works for web elements. Also, you might be not able to take a screenshot until the method completes.

         

        With this in mind, I got another idea that is more complex in implementation but has more chances for success.

        The points are like this:

        a) It is possible with TestComplete to inject and execute some JScript code into web page (see "Executing JavaScript on Web Pages" help topic for more details);

        b) Injected script will draw a border around web element, then you will take a screenshot and execute the script one more time to remove the border.

         

        I don't have script example for TestComplete, but below is a sample for Selenium and I hope that you will manage to adopt it to your code.

            public void setUp() throws Exception {
        driver = new FirefoxDriver();
        js = (JavascriptExecutor) driver;
    }


    private void highlightElement(WebElement element, int duration) throws InterruptedException {
        String original_style = element.getAttribute("style");

        js.executeScript(
                "arguments[0].setAttribute(arguments[1], arguments[2])",
                element,
                "style",
                "border: 2px solid red; border-style: dashed;");

        if (duration > 0) {
            Thread.sleep(duration * 1000);
            js.executeScript(
                    "arguments[0].setAttribute(arguments[1], arguments[2])",
                    element,
                    "style",
                    original_style);
        }
    }

        Hope, this will help...

         

        P.S. Actually... It even might be enough just to call .getAtribute()/.setAttribute() methods of web element directly from TestComplete without any necessity to inject any code into web page. If this guess is correct, then the implementation will be really simple.