How to take snapshot?

[bartonhammond]

Could this example be extended to show how to take a screen shot? I'd like to take screen shot of the screens before each change.

I don't understand the difference between a "snapshot" and a "screenshot".

I tried calling the following Curl POST function and the console log has this:

https://crossbrowsertesting.com/api/v3/selenium/d7831739-4fd7-4423-bdbc-1ce2126ce72d/snapshots
Caught Exception: Undefined property: ToDoTest::$url

The API docs for Take Snap shot mention nothing about this property: https://crossbrowsertesting.com/apidocs/v3/selenium.html#!/default/post_selenium_selenium_test_id_snapshots

  public function takeScreenShot() {
        $sessionId = $this->driver->getSessionId();
        $url = 'https://crossbrowsertesting.com/api/v3/selenium/' . $sessionId . '/snapshots';
        echo "\n" . $url . "\n";
        $ch = curl_init();    
        curl_setopt($ch, CURLOPT_URL,$this->url);
        curl_setopt($ch, CURLOPT_POST, true);
        curl_setopt($ch, CURLOPT_POSTFIELDS, array());                
        curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
        curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
        curl_setopt($ch, CURLOPT_USERPWD, "$this->login:$this->password");
        $result = curl_exec($ch);
        curl_close($ch);
        var_dump($result);
    }

[adamtaylor13]

@bartonhammond Can you provide the script that you're trying to run so I could help you debug?

Also, where is the snippet at the bottom located? I think it may be incorrect, as /selenium/{selenium_test_id}/snapshot is supposed to accept a selenium test ID, instead of a session ID which may be causing the issue.

[lkende]

And for clarification: A "snapshot" is single "windowed" image of the browser to distinguish between a "screenshot" on our Screenshot system which takes "windowed", "fullpage", and "chromeless" images. (Chromeless is the "fullpage" without the browsers "chrome" - toolbars, url bar, etc).

[bartonhammond]

<?php
// php composer.phar require facebook/webdriver
use Facebook\WebDriver\Remote\RemoteWebDriver;
use Facebook\WebDriver\WebDriverBy;
use Facebook\WebDriver\WebDriverExpectedConditions;
use PHPUnit\Framework\TestCase;
// composer global require phpunit/phpunit
class ToDoTest extends TestCase {

    private $username = "";
    private $authkey = "";    

    public $ch;
  
    protected $driver;
    public function takeScreenShot() {
        $url = $this->driver->getCurrentURL();        
        $sessionId = $this->driver->getSessionId();
        $url = 'https://crossbrowsertesting.com/api/v3/selenium/' . $sessionId . '/snapshots';
        echo "\n" . $url . "\n";

        $post = [
            'ToDoTest' => $url
        ];
        
        $ch = curl_init();    
        curl_setopt($ch, CURLOPT_URL,$this->url);
        curl_setopt($ch, CURLOPT_POST, true);
        url_setopt($ch, CURLOPT_POSTFIELDS, $post);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
        curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
        curl_setopt($ch, CURLOPT_USERPWD, "$this->login:$this->password");
        $result = curl_exec($ch);
        curl_close($ch);
        var_dump($result);
    }

    public function setUp() {

        $capabilities = array("name"=> "Selenium Test Example",
                              "build"=> "1.0",
                              "browser_api_name"=> "FF46",
                              "os_api_name"=> "Win10",
                              "record_video"=> "true",
                              "take_snapshot"=> "true",
                              "record_network"=> "true",);
        $host = "http://" . $this->username . ":" . $this->authkey . "@hub.crossbrowsertesting.com:80/wd/hub";
        $this->driver = RemoteWebDriver::create($host, $capabilities );

    }
    public function testToDos() {
        try {
            print "\nNavigating to URL\n";
            $this->driver->get("http://croSsbrowsertesting.github.io/todo-app.html");

            sleep(3);
            $this->takeScreenShot();
            print "Clicking Checkbox\n";
            $this->driver->findElement(WebDriverBy::name("todo-4"))->click();
            print "Clicking Checkbox\n";
            $this->takeScreenShot();            
            $this->driver->findElement(WebDriverBy::name("todo-5"))->click();
            $elems = $this->driver->findElements(WebDriverBy::className("done-true"));
            $this->assertEquals(2, count($elems));
            print "Entering Text\n";
            $this->takeScreenShot();
            $this->driver->findElement(WebDriverBy::id("todotext"))->sendKeys("Run your first Selenium test");
            print "Adding todo to the list\n";
            $this->driver->findElement(WebDriverBy::id("addbutton"))->click();
            $this->takeScreenShot();            
            $spanText = $this->driver->findElement(WebDriverBy::xpath("/html/body/div/div/div/ul/li[6]/span"))->getText();
            $this->takeScreenShot();
            $this->assertEquals("Run your first Selenium test", $spanText);
            print "Archiving old todos\n";
            $this->driver->findElement(WebDriverBy::linkText("archive"))->click();
            $this->takeScreenShot();
            $elems = $this->driver->findElements(WebDriverBy::className("done-false"));
            $this->assertEquals(4, count($elems));
            // if we've made it this far, assertions have passed and we'll set the score to pass.
        } catch (Exception $ex) {
            // if we caught an exception along the way, an assertion failed and we'll set the score to fail.
            print "Caught Exception: " . $ex->getMessage();
        }
    }
    public function tearDown() {
        $this->driver->quit();
    }
}
?>

[bartonhammond]

I now have the selenium test id and still get the same error when trying to get snapshot.

<?php
// php composer.phar require facebook/webdriver
use Facebook\WebDriver\Remote\RemoteWebDriver;
use Facebook\WebDriver\WebDriverBy;
use Facebook\WebDriver\WebDriverExpectedConditions;
use PHPUnit\Framework\TestCase;
// composer global require phpunit/phpunit
class ToDoTest extends TestCase {

    private $username = "";
    private $authkey = "";    
    private $seleniumTestId="";
    protected $driver;    
    public $ch;

    public function getSeleniumTestId() {
        $url = "https://crossbrowsertesting.com/api/v3/selenium?format=json&num=1&active=true";
        $ch = curl_init();    
        curl_setopt($ch, CURLOPT_URL,$url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
        curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
        curl_setopt($ch, CURLOPT_USERPWD, "$this->username:$this->authkey");
        
        $result = curl_exec($ch);
        curl_close($ch);
        
        $json = json_decode($result);
        $this->seleniumTestId = $json->selenium[0]->selenium_test_id;
    }        


    public function takeScreenShot() {
        $url = $this->driver->getCurrentURL();        

        $url = 'https://crossbrowsertesting.com/api/v3/selenium/' . $this->seleniumTestId . '/snapshots';
        echo "\n" . $url . "\n";

        $ch = curl_init();    
        curl_setopt($ch, CURLOPT_URL,$this->url);
        curl_setopt($ch, CURLOPT_POST, true);
        url_setopt($ch, CURLOPT_POSTFIELDS, array());
        curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
        curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
        curl_setopt($ch, CURLOPT_USERPWD, "$this->username:$this->authkey");
        
        $result = '';
        try {
            $result = curl_exec($ch);
            $jsonData = json_decode($result);
            var_dump($jsonData);            
        } catch (\Exception $e) {
            echo "OOOOps - exception!\n";
            var_dump($e);
        } finally {
            curl_close($ch);
        }
    }

    public function setUp() {

        $capabilities = array("name"=> "Selenium Test Example",
                              "build"=> "1.0",
                              "browser_api_name"=> "FF46",
                              "os_api_name"=> "Win10",
                              "record_video"=> "true",
                              "take_snapshot"=> "true",
                              "record_network"=> "true",);
        $host = "http://" . $this->username . ":" . $this->authkey . "@hub.crossbrowsertesting.com:80/wd/hub";
        $this->driver = RemoteWebDriver::create($host, $capabilities );
        $this->getSeleniumTestId();
    }
    
    public function testToDos() {
        try {
            print "\nNavigating to URL\n";
            $this->driver->get("http://croSsbrowsertesting.github.io/todo-app.html");

            sleep(3);
            $this->takeScreenShot();
            print "Clicking Checkbox\n";
            $this->driver->findElement(WebDriverBy::name("todo-4"))->click();
            print "Clicking Checkbox\n";
            $this->takeScreenShot();            
            $this->driver->findElement(WebDriverBy::name("todo-5"))->click();
            $elems = $this->driver->findElements(WebDriverBy::className("done-true"));
            $this->assertEquals(2, count($elems));
            print "Entering Text\n";
            $this->takeScreenShot();
            $this->driver->findElement(WebDriverBy::id("todotext"))->sendKeys("Run your first Selenium test");
            print "Adding todo to the list\n";
            $this->driver->findElement(WebDriverBy::id("addbutton"))->click();
            $this->takeScreenShot();            
            $spanText = $this->driver->findElement(WebDriverBy::xpath("/html/body/div/div/div/ul/li[6]/span"))->getText();
            $this->takeScreenShot();
            $this->assertEquals("Run your first Selenium test", $spanText);
            print "Archiving old todos\n";
            $this->driver->findElement(WebDriverBy::linkText("archive"))->click();
            $this->takeScreenShot();
            $elems = $this->driver->findElements(WebDriverBy::className("done-false"));
            $this->assertEquals(4, count($elems));
            // if we've made it this far, assertions have passed and we'll set the score to pass.
        } catch (Exception $ex) {
            // if we caught an exception along the way, an assertion failed and we'll set the score to fail.
            print "Caught Exception: " . $ex->getMessage();
        }
    }
    public function tearDown() {
        $this->driver->quit();
    }
}
?>```

[bartonhammond]

Ok - the following code works (see below). Maybe it would be worth while to update the provided example for others.

Here's a bit from the console that provides links to the image. So I can view the image using the $image link.

But when I go to the Test Results page I do not see any Snapshots. This link: https://app.crossbrowsertesting.com/selenium/9694098?view=commands does not have any results in the "Snapshot" page. Why not?

class stdClass#15 (8) {
  public $hash =>
  string(20) "z0127d595f920435be79"
  public $date_added =>
  string(24) "2017-11-22T00:27:46.000Z"
  public $description =>
  NULL
  public $tags =>
  array(0) {
  }
  public $show_result_web_url =>
  string(83) "https://app.crossbrowsertesting.com/selenium/9694098/snapshots/z0127d595f920435be79"
  public $show_result_public_url =>
  string(107) "https://app.crossbrowsertesting.com/public/i428df88d4575d3e/selenium/9694098/snapshots/z0127d595f920435be79"
  public $image =>
  string(102) "https://s3.amazonaws.com/media.crossbrowsertesting.com/users/406430/snapshots/z0127d595f920435be79.png"
  public $thumbnail_image =>
  string(109) "https://s3.amazonaws.com/media.crossbrowsertesting.com/users/406430/snapshots/thumbs/z0127d595f920435be79.png"
}

Working code:

<?php
// php composer.phar require facebook/webdriver
use Facebook\WebDriver\Remote\RemoteWebDriver;
use Facebook\WebDriver\WebDriverBy;
use Facebook\WebDriver\WebDriverExpectedConditions;
use PHPUnit\Framework\TestCase;
// composer global require phpunit/phpunit
class ToDoTest extends TestCase {

    private $username = "";
    private $authkey = "";    
    private $seleniumTestId="";
    protected $driver;    
    public $ch;

    public function getSeleniumTestId() {
        $url = "https://crossbrowsertesting.com/api/v3/selenium?format=json&num=1&active=true";
        $ch = curl_init();    
        curl_setopt($ch, CURLOPT_URL,$url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
        curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
        curl_setopt($ch, CURLOPT_USERPWD, "$this->username:$this->authkey");
        
        $result = curl_exec($ch);
        curl_close($ch);
        
        $json = json_decode($result);
        $this->seleniumTestId = $json->selenium[0]->selenium_test_id;
    }        


    public function takeScreenShot() {
        $url = 'https://crossbrowsertesting.com/api/v3/selenium/' . $this->seleniumTestId . '/snapshots';
        echo "\n" . $url . "\n";

        $ch = curl_init();    
        curl_setopt($ch, CURLOPT_URL,$url);
        curl_setopt($ch, CURLOPT_POST, true);
        curl_setopt($ch, CURLOPT_POSTFIELDS, array());
        curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
        curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
        curl_setopt($ch, CURLOPT_USERPWD, "$this->username:$this->authkey");
        
        $result = '';
        try {
            $result = curl_exec($ch);
            $jsonData = json_decode($result);
            var_dump($jsonData);            
        } catch (\Exception $e) {
            echo "OOOOps - exception!\n";
            var_dump($e);
        } finally {
            curl_close($ch);
        }
    }

    public function setUp() {

        $capabilities = array("name"=> "Selenium Test Example",
                              "build"=> "1.0",
                              "browser_api_name"=> "FF46",
                              "os_api_name"=> "Win10",
                              "record_video"=> "true",
                              "take_snapshot"=> "true",
                              "record_network"=> "true",);
        $host = "http://" . $this->username . ":" . $this->authkey . "@hub.crossbrowsertesting.com:80/wd/hub";
        $this->driver = RemoteWebDriver::create($host, $capabilities );
        $this->getSeleniumTestId();
    }
    
    public function testToDos() {
        try {
            print "\nNavigating to URL\n";
            $this->driver->get("http://croSsbrowsertesting.github.io/todo-app.html");

            sleep(3);
            $this->takeScreenShot();
            print "Clicking Checkbox\n";
            $this->driver->findElement(WebDriverBy::name("todo-4"))->click();
            print "Clicking Checkbox\n";
            $this->takeScreenShot();            
            $this->driver->findElement(WebDriverBy::name("todo-5"))->click();
            $elems = $this->driver->findElements(WebDriverBy::className("done-true"));
            $this->assertEquals(2, count($elems));
            print "Entering Text\n";
            $this->takeScreenShot();
            $this->driver->findElement(WebDriverBy::id("todotext"))->sendKeys("Run your first Selenium test");
            print "Adding todo to the list\n";
            $this->driver->findElement(WebDriverBy::id("addbutton"))->click();
            $this->takeScreenShot();            
            $spanText = $this->driver->findElement(WebDriverBy::xpath("/html/body/div/div/div/ul/li[6]/span"))->getText();
            $this->takeScreenShot();
            $this->assertEquals("Run your first Selenium test", $spanText);
            print "Archiving old todos\n";
            $this->driver->findElement(WebDriverBy::linkText("archive"))->click();
            $this->takeScreenShot();
            $elems = $this->driver->findElements(WebDriverBy::className("done-false"));
            $this->assertEquals(4, count($elems));
            // if we've made it this far, assertions have passed and we'll set the score to pass.
        } catch (Exception $ex) {
            // if we caught an exception along the way, an assertion failed and we'll set the score to fail.
            print "Caught Exception: " . $ex->getMessage();
        }
    }
    public function tearDown() {
        $this->driver->quit();
    }
}
?>

[lkende]

@bartonhammond The snapshots are there. In the commands view, you can see the camera icon next to the command run that has a snapshot. When you take a snapshot, it is associated with the previous command. The snapshots tab only shows a result for selected commands with the icon, so you must select the right command (or click the camera icon).

In "results" view you can see a grid of all your snapshots and videos taken during the test.

[bartonhammond]

Great! - I missed seeing that icon.

Would you like me to do a PR w/ this updated script demonstrating how to get snapshots?

[lkende]

Yes. That'd be great.