Pop-up Handling

In my script I click on a link and get a JS pop-up to add additional information. I have the following code, but it is timing out. How do I access the handling of the pop-up elements:

...       
 }).then(function(){
      console.log('Select Sport from Drop-Down List');
      return $browser.waitForAndFindElement(By.xpath('//*[@id="id_sport"]')).then(function(element){
        element.click();
      });
    
    }).then(function(){
      console.log('Select Football from Drop-Down List');
      return $browser.waitForAndFindElement(By.xpath('//*[@id="id_sport"]/option[7]')).then(function(element){
        element.click();
      });
    
    }).then(function(){
      console.log('Enter Away Team Abington');
      return $browser.waitForAndFindElement(By.xpath('//*[@id="id_away"]')).then(function(element){
        element.sendKeys("Abington");
      });
    
    }).then(function(){
      console.log('Enter Home Team Berks Catholic');
      return $browser.waitForAndFindElement(By.xpath('//*[@id="id_home"]')).then(function(element){
        element.sendKeys("Berks Catholic");
      });
    
    }).then(function(){
      console.log('Enter Date and time');
      return $browser.waitForAndFindElement(By.xpath('//*[@id="date_and_time"]')).then(function(element){
        element.sendKeys("11/25/2014 02:00 PM");
      });
    
    }).then(function(){
      console.log('Save New Game');
      return $browser.waitForAndFindElement(By.xpath('/html/body/div[2]/form/table[2]/tbody/tr[5]/td[2]/button')).then(function(element){
        element.click();
      });
    
    }).then(function(){
    
      // Find and ensure that Game Created! is displayed
      $browser.waitForAndFindElement(By.xpath('/html/body/div[2]')).then(function(element){
        element.getText().then(function(gameCreatedText){
          console.log('Game Created Text: %s', gameCreatedText);
          assert.ok(gameCreatedText.indexOf('Game Created!') > -1, "Title does not validate");
        });
      });
    
    }).then(function(){
      console.log('Close New Game pop-up');
      return $browser.waitForAndFindElement(By.xpath('//*[@id="upload_pop_up_content"]/div[2]/input')).then(function(element){
        element.click();
      });

Hi there @sasaro is the pop up a new window or a div modal? If it’s a new window, you will have to tell selenium to switch the active window to it, with the .switchTo method in $browser, here’s some snippet of switching to an iframe:

// Load the page
$browser.get("http://www.w3schools.com/html/tryit.asp?filename=tryhtml_select2").then(function(){
  // Focus the iframe
  $browser.switchTo().frame("iframeResult");
  // Click on select
    return $browser.waitForAndFindElement(By.name("cars"), 15000).then(function(elem) {
    selectbox = elem;
    selectbox.click();
  });
}).then(function() {
  // Select an option
    return selectbox.findElement(By.css("option[value='audi']")).click();
})

Also, feel free to PM me your monitor URL and I can prob help you out more directly.

Hi – Thank you @rferreira for the quick reply. It’s a div modal that pop’s up. I tried the switchTo method, but when I validated it threw an error for switchTo not being a proper method.

Here is what I had:

var By = $driver.By;
var assert = require('assert');

// Load the PennLive.com TUCMS home page
$browser.get("http://highschoolsports.pennlive.com/reporter/").then(function(){

  // Click the search button to open up a text field
  console.log('Enter username and password to login into TUCMS');
  $browser.findElement(By.id("username")).sendKeys("tmctest");
  $browser.findElement(By.id("password")).sendKeys("REDACTED");
  $browser.findElement(By.id("login-button")).click();    

}).then(function(){
  console.log('Click Add A New Game link');
  return $browser.waitForAndFindElement(By.xpath('//*[@id="content"]/div[4]/a[1]')).then(function(element){
    element.click();
  });

}).then(function(){
  console.log('Switch Focus to PopUp Modal');
  $browser.switchTo().defaultContent();
  $browser.swicthTo().frame(driver.findElements(By.tagName("iframe").get(0))).then(function(inframe){
    inframe.findElement(By.xpath('//*[@id="id_sport"]')).click();
    inframe.findElement(By.xpath('//*[@id="id_sport"]/option[7]')).click();
    inframe.findElement(By.xpath('//*[@id="id_away"]')).sendKeys("Abington");
    inframe.findElement(By.xpath('//*[@id="id_home"]')).sendKeys("Berks Catholic");
    inframe.findElement(By.xpath('//*[@id="date_and_time"]')).sendKeys("11/25/2014 02:00 PM");
    inframe.findElement(By.xpath('/html/body/div[2]/form/table[2]/tbody/tr[5]/td[2]/button')).click();
    inframe.waitForAndFindElement(By.xpath('/html/body/div[2]')).then(function(element){
      element.getText().then(function(gameCreatedText){
        console.log('Game Created Text: %s', gameCreatedText);
        assert.ok(gameCreatedText.indexOf('Game Created!') > -1, "Title does not validate");
      });
    });
    inframe.waitForAndFindElement(By.xpath('//*[@id="upload_pop_up_content"]/div[2]/input')).click();

  });

});

I’m quite new at this. We are trying to figure out if we can use this for automated testing.

Here is the monitor URL that I have for this test, however, I have not updated the script:
https://synthetics.newrelic.com/accounts/727551/monitors/5af39f08-e834-4a2b-859b-2c0aeb15dbf8

Is this what you mean by PM??

@sasaro here’s a working script, the issue you were having had to do with your site’s usage of an iframe, you effectively had to switch into and out of the iframe for things to work as you wanted. var By = $driver.By;
var assert = require(‘assert’);

// Load the PennLive.com TUCMS home page
$browser.get("http://highschoolsports.pennlive.com/reporter/").then(function(){

	// Click the search button to open up a text field
	console.log('Enter username and password to login into TUCMS');
	$browser.findElement(By.id("username")).sendKeys("REDACTED");
	$browser.findElement(By.id("password")).sendKeys("REDACTED");
	$browser.findElement(By.id("login-button")).click();    

}).then(function(){
	console.log('Click Add A New Game link');
	return $browser.waitForAndFindElement(By.xpath('//*[@id="content"]/div[4]/a[1]')).then(function(element){
		element.click();
	});

}).then(function(){
	return $browser.switchTo().frame(0);
}).then(function(){
	console.log('Select Sport from Drop-Down List');

	return $browser.waitForAndFindElement(By.xpath('//*[@id="id_sport"]/option[7]')).then(function(element){
		element.click();
	});

}).then(function(){
	console.log('Select Football from Drop-Down List');
	return $browser.waitForAndFindElement(By.xpath('//*[@id="id_sport"]/option[7]')).then(function(element){
		element.click();
	});

}).then(function(){
	console.log('Enter Away Team Abington');
	return $browser.waitForAndFindElement(By.xpath('//*[@id="id_away"]')).then(function(element){
		element.sendKeys("Abington");
	});

}).then(function(){
	console.log('Enter Home Team Berks Catholic');
	return $browser.waitForAndFindElement(By.xpath('//*[@id="id_home"]')).then(function(element){
		element.sendKeys("Berks Catholic");
	});

}).then(function(){
	console.log('Enter Date and time');
	return $browser.waitForAndFindElement(By.xpath('//*[@id="date_and_time"]')).then(function(element){
		element.sendKeys("11/25/2014 02:00 PM");
	});

}).then(function(){
	console.log('Save New Game');
	return $browser.waitForAndFindElement(By.xpath('/html/body/div[2]/form/table[2]/tbody/tr[5]/td[2]/button')).then(function(element){
		element.click();
	});

}).then(function(){

	// Find and ensure that Game Created! is displayed
	$browser.waitForAndFindElement(By.xpath('/html/body/div[2]')).then(function(element){
		element.getText().then(function(gameCreatedText){
			console.log('Game Created Text: %s', gameCreatedText);
			assert.ok(gameCreatedText.indexOf('Game Created!') > -1, "Title does not validate");
		});
	});

}).then(function(){
	return $browser.switchTo().defaultContent();

}).then(function(){
	console.log('Close New Game pop-up');
	return $browser.waitForAndFindElement(By.xpath('//*[@id="upload_pop_up_content"]/div[2]/input')).then(function(element){
		element.click();
	});

});
1 Like

Ahhh…such an easy fix. Thank you for the lesson on how to use the js to fix this issue. Newbie me appreciates it.

ah no worries, we’re here to help, enjoy Synthetics!

I moved a post to a new topic: Pop-up windows