I'm testing a simple flow using Codeception with Selenium/FacebookWebdriver where a popup window gets closed at the end - causing entire test to break.
The code is complete (the test will run) and will reproduce the error.
I'm really desperate here, any suggestions will be very much appreciated.
These are the errors I get:
Codeception error message:
[Facebook\WebDriver\Exception\NoSuchWindowException]
Window not found. The browser window may have been closed.
Selenium server output message:
WARN - Exception: Window not found. The browser window may have been closed.
This code reproduces the problem.
It consits of 3 .html files (main.html, intermediate.html, popup.html), test file (PopupCest.php) and configuration file (selenium.suite.yml).
PopupCest.php
<?php
class PopupCest
{
public function popup(SeleniumTester $I)
{
$I->expectTo('Start on main page and click a link that opens a popup');
$I->amOnPage('/main.html');
$I->click('#main-link');
$I->expectTo('Interact with the popup window and click the final confirmation button');
$I->switchToNextTab();
$I->click('#final-confirmation-button');
$I->expectTo('Go back to intermediate window and let it do its magic');
$I->switchToPreviousTab();
$I->see('contents of this intermediate page');
$I->seeInCurrentUrl('intermediate.html');
}
}
selenium.suite.yml
class_name: SeleniumTester
modules:
enabled:
- WebDriver:
url: http://localhost
browser: firefox
- \Helper\Selenium
main.html
<html>
<head>
<meta charset="utf-8">
<title>Main page - under my control</title>
<meta name="description" content="Main page - under my control">
</head>
<body>
<h1>Main</h1>
<p>
After clicking this link, "intermediate page" url is received from a backend operation in reality.
</p>
<br>
Click here to open the popup <br>
</body>
</html>
intermediate.html
<html>
<head>
<meta charset="utf-8">
<title>External - intermediate page</title>
<meta name="description" content="Intermediate page outside of my control">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1>Intermediate</h1>
<p>
In reality, contents of this intermediate page is fully controlled by other party - a payment processor. <br>
It only load a javascript that opens up a popup window where user enters his payment details.
</p>
<script type="text/javascript">
$(function() {
var settings = "height=400,width=500,status=yes,dependent=no,resizable=yes";
popup = window.open('popup.html', 'dont_know_the_name_here', settings);
if (popup != null) {
popup.focus();
}
});
</script>
</body>
</html>
popup.html
<html>
<head>
<meta charset="utf-8">
<title>External - popup</title>
<meta name="description" content="Popup page outside of my control">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1>Popup</h1>
<p>
Contents of this page is fully controlled by other party - a payment processor. <br>
This is where user enters his payment details.
</p>
<p>
e.g. <i>"After you have finished your data input, click here to:"</i> <br>
Confirm your payment
</p>
<script type="text/javascript">
$(function() {
$('#final-confirmation-button').on('click', function(e) {
e.preventDefault();
window.close(); // <-- this breaks it all
});
});
</script>
</body>
</html>
Thank you for your help,
Tomas
Test code seems to be correct, I suspect that problem is related to outdated versions or possibly Firefox driver.
I tested your code with chrome+chromedriver and it seems to work without problem. Here's a test repo with instructions how to use chromedriver + required config changes: https://github.com/henrikauppinen/codeception-popup-chromedriver
Generally I'd advise to use Chrome for this type of testing, unless you are testing Firefox specifically or if it's a requirement.
Related
The botman widget appears okay but when i open it to view the chat frame it gives error 404 inside the chat frame.
This is the part where i declare the botman widget
<script>
var botmanWidget = {
frameEndpoint:'https://www.youtube.com/'
aboutText: 'ssdsd',
introMessage: "✋ Hi! I'm form ItSolutionStuff.com"
title: 'BotMan'
};
</script>
<script src='https://cdn.jsdelivr.net/npm/botman-web-widget#0/build/js/widget.js'></script>
and this is the chat.html file referenced by the botmanWidget
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/botman-web-widget#0/build/assets/css/chat.min.css">
<title>BOtMANS</title>
</head>
<body>
<script id="botmanWidget" src='https://cdn.jsdelivr.net/npm/botman-web-widget#0/build/js/chat.js'></script>
</body>
</html>
The frameEndpoint should be an URL. So either you put in an absolute URL, f. ex. https://your-url.com or a relative one with forward slashes /, f. ex. /config/botman/chat.html.
You can test, if your frame page is callable by using the current domain you run your site on and append /config/botman/chat.html.
Here's a code snippet I've got where I'm trying to show a 'loader' gif. I'm testing on my localhost and works fine. However with a little observation now I wonder is it really showing the gif while php pulls data from the SQL data base or otherwise.
My observation is, when I clear browser cache and refresh the page, I see the browser's loader images turns a couple of rounds before my page's loader loads. Am I missing something?
PS: The loader gif I've got is a very light file obviously.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
$(document).ajaxStart(function () {
$("#wait").css("display", "block");
});
$(document).ajaxComplete(function () {
$("#wait").css("display", "none");
});
$("#text").load("example.php");
});
</script>
</head>
<body>
<button>Change Content</button>
<div id="wait" style="display:none;"><img src="../images/loader.gif"></div>
<div id="text"></div>
</body>
</html>
A great way to test loader images used in ajax calls while developing is to introduce an artificial delay in the script you are calling.
usleep(3000);
This will make the script sleep for 3 seconds, simulating a decent amount of network delay, allowing you to visually see your loader images in action.
I'm a newbie to jquery-pjax. Now, I'm developing a flexible(no refresh and load content asynchronously) single web page using PHP and jQuery.
But some issues occur in my page when using jquery-pjax. One of the issues is that jquery-pjax will strip an outermost tag automatically in asynchronous responses.
Let me see my source code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery.min.js"></script>
<script src="jquery.pjax.min.js"></script>
<script>
$(document).pjax('#pjax-container a', '#pjax-container', {
timeout: 1300,
replace: true,
fragment: 'body'
});
</script>
</head>
<body>
<?php
if (!isset($_SERVER['HTTP_X_PJAX']))
{
?>
<h1>A jquery-pjax test page.</h1>
<div id="pjax-container">
<?php
}
?>
Refresh
<?php
if (!isset($_SERVER['HTTP_X_PJAX']))
{
?>
</div>
<?php
}
?>
</body>
</html>
In terms only the source code, It seems that there isn't any issue. But when run it and click the refresh link, the link be removed and there is only its caption. I saw a network monitor in my browser, There is the link in the new asynchronous response. (body : <body>Refresh</body>) But I saw a elements monitor, There isn't the link... (body : <div id="pjax-container">Refresh</div>)
Question : Why jquery-pjax does strip an outhermost tag?
Thanks.
I can't reproduce your issue. I set up two pages like your script would spit out
http://jsbin.com/potuputaha/2/edit
http://jsbin.com/tutebebufi/1/edit
And when you run it http://jsbin.com/potuputaha/2, pressing the link will replace the page with the Refresh me from the second page.
I testing send and receive data to php file with jQuery and I have an issue with IE(Im using IE9 but I checked with IE8 and IE7)
when I click in on of my div I send to the server an "ID" and the PHP file return the answer back, its work and the jQuery is showing the result in other Div and in alert msg.
The issue start when i change the code in the received php file, if I click again in one of my divs, the jQuery showing the same msg even I change the code and the replay msg is different now.
This problem solved when I close and reopen the IE.
This issue doesn't happen with firefox and chrome, does anyone have any idea ?
html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('.user').click(function(){
var id_value = $(this).data('friendid');
$.get('test1.php', {id: id_value}, function(data) {
$('#show').html(data);
alert(data);
});
})
})
</script>
</head>
<body>
<div class="user" data-friendid="1">
<img src='webimgs/nopf.jpg' alt="test" />
<h4> fullname</h4>
<br />
</div>
<div class="user" data-friendid="2">
<img src='webimgs/nopf.jpg' alt="test2"/>
<h4> fullname</h4>
<br />
</div>
<div id="show" style="color:red">
</div>
</body>
</html>
and the PHP file:
<?php
if ($_GET["id"]==1) { echo "you choose number is " . $_GET["id"].", thanks." ; }
?>
Thank to "Boaz" I use $.ajaxSetup({cache: false}) and its fix the issue
jQuery .get method can be cached depending on browser setup. If you use the .post method it will prevent caching of data on the browser side.
Referenced from http://www.sitepoint.com/key-differences-post/
Characteristics of GET:
Use GET for safe actions and POST for unsafe actions.
GET requests can be cached
GET requests can remain in the browser history
GET requests can be bookmarked
GET requests can be distributed & shared
GET requests can be hacked
I am using a link from a page where I use Jquery Mobile to a page where I do not. For some reason the Jquery Mobile styling persist onto the page that I link to UNTIL I refresh the page, in which case the page loads correctly. I am pretty baffled at what might cause this issue, and I have tested it on both Firefox and Chrome. I have tried disabling caching all with no luck.
Does anyone have an idea what could cause this?
Thanks in advance.
hello_world.php:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
Create
</body>
</html>
create2.php:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<form>
Title: <input type="text" name="title" value="">
submit: <input type="submit" value="submit">
</form>
</body>
</html>
refer this page to understand how jquerymobile's link works
put this attributes to anchor rel="external", data-ajax="false"
http://demos.jquerymobile.com/1.2.0/docs/pages/page-links.html
Links that point to other domains or that have rel="external",
data-ajax="false" or target attributes will not be loaded with Ajax
Default link behavior: Ajax
To enable animated page transitions, all links that point to an
external page (ex. products.html) will be loaded via Ajax. To do this
unobtrusively, the framework parses the link's href to formulate an
Ajax request (Hijax) and displays the loading spinner. All this is
done automatically by jQuery Mobile.