I have problems to remove a handler from the viewer.
viewer.addHandler('viewport-change', function() {
// do stuff works
});
viewer.addHandler('zoom', function() {
if (viewer.viewport.getZoom() > threshold) {
viewer.removeHandler('viewport-change', function() {
console.log("removed");
});
console.log("Zoom:" + viewer.viewport.getZoom());
}
});
I can see the output with the zoom factor, but I never saw the "removed" output.
Also just adding and removing the "viewport-change"-handler did not worked. removeAllHandlers seems to work, but I fail with removing only one handler.
What I really try to do is something like a swipe effect. If the image is not zoomed in and the left edge hits the viewer border i want to show next image. Maybe there is a better way to do that.
Thanks in advance
In order to make removeHandler work, it needs to be the exact same function that you used with addHandler, like so:
var viewportChangeHandler = function() {
// do stuff works
};
viewer.addHandler('viewport-change', viewportChangeHandler);
viewer.addHandler('zoom', function() {
if (viewer.viewport.getZoom() > threshold) {
viewer.removeHandler('viewport-change', viewportChangeHandler);
console.log("Zoom:" + viewer.viewport.getZoom());
}
});
That said, if all you want to do is detect swipes, just a handler on canvas-drag (plus some additional logic of your own writing) should be sufficient.
Related
I can't understand in any way.
I need my old application to be cleared.
That is, when I clicked and followed the ajax, some textures that have the same name remain the previous ones, as well as all the properties and others from the previous loading.
if (Object.keys(loader.resources).length) {
// for (var texture in PIXI.utils.TextureCache) {
// var tmp = PIXI.Texture.removeFromCache(texture);
// tmp.destroy(true);
// }
// for (var texture in PIXI.utils.BaseTextureCache) {
// PIXI.utils.BaseTextureCache[texture].destroy(true);
// }
PIXI.utils.BaseTextureCache = PIXI.utils.TextureCache = loader.resources = {};
loader.reset();
app.destroy({
children: true,
texture: true,
baseTexture: true
});
}
Will it be possible to complete the ajax transition application in order to launch a new one with new textures of the same name?
In the download, I tried to add "?Number" to the image address:
let add = function (arr) {
while (!loader.loading) {
for (var i in arr) {
loader.add(i, arr[i] + '?' + new Date().getTime());
}
break;
}
};
But still nothing comes out.
I make the transition through:
$.get(href, function (data) {
//code
});
Everything loads and works fine, except for the pictures.
They hang, and after the transitions, they do not change, but only everything mixes and sometimes we observe it from the previous ones.
Of course, after reloading the page at the current address, everything works as it should, it doesn’t work only on ajax, for some reason the cache is not discarded.
The issue is resolved, everything works, I just forgot to update the variable with resources.
Due to the fact that at the first initialization:
let resource = PIXI.loader.resources;
Which I had in the global area.
Due to the fact that I did not update it, I could not change the textures.
Now, after all the removal and new filling, I substitute again:
resource = PIXI.loader.resources;
And everything began to work as it should.
Preparation
Hi i am using CasperJS in combination with grunt-casper (github.com/iamchrismiller/grunt-casper) for running automated functional and regression tests in our GUI Development process for verification.
We use it like this, casper runner in gruntfile.js:
casper: {
componentTests: {
options: {
args: ['--ssl-protocol=any', '--ignore-ssl-errors=true', '--web-security=no'],
test: true,
includes: ['tests/testutils/testutils.js']
},
files: {
'tests/testruns/logfiles/<%= grunt.template.today("yyyy-mm-dd-hhMMss") %>/componenttests/concat-testresults.xml': [
'tests/functionaltests/componenttests/componentTestController.js']
}
},
so as it can be seen here we just normally run casper tests with SSL params and calling only ONE Controllerclass here instead of listing the single tests (this is one of the roots of my problem). grunt-casper delivers the object which is in charge for testing and inside every single Controllerclass the tests are included and concatenated....
...now the componentTestController.js looks like the following:
var config = require('../../../testconfiguration');
var urls = config.test_styleguide_components.urls;
var viewportSizes = config.test_styleguide_components.viewportSizes;
var testfiles = config.test_styleguide_components.testfiles;
var tempCaptureFolder = 'tests/testruns/temprun/';
var testutils = new testutils();
var x = require('casper').selectXPath;
casper.test.begin('COMPONENT TEST CONTROLLER', function(test) {
casper.start();
/* Run tests for all given URLs */
casper.each(urls, function(self, url, i) {
casper.thenOpen(url, function() {
/* Test different viewport resolutions for every URL */
casper.each(viewportSizes, function(self, actViewport, j) {
/* Reset the viewport */
casper.then(function() {
casper.viewport(actViewport[0], actViewport[1]);
});
/* Run the respective tests */
casper.then(function() {
/* Single tests for every resolution and link */
casper.each(testfiles, function(self, actTest, k) {
casper.then(function() {
require('.'+actTest);
});
});
});
});
});
});
casper.run(function() {
test.done();
});
});
Here you can see that we running a 3 level loop for testing
ALL URLs given in a JSON config file which are contained in an ARRAY of String ["url1.com","url2.com"....."urln.com"]
ALL VIEWPORT SIZES so that every URL is tested in our desired Viewport resolutions to test the correct Responsibility behaviour of the components
ALL TESTFILES, all testfiles only include a TEST STUB what means, no start, begin or something else, its all in a large Testsourrounding.
MAYBE this is already mocky and can be done in a bette way, so if this is the case i would glad if someone has proposals here, but don't forget that grunt-casper is involved as runner.
Question
So far, so good, the tool in general works fine and the construction we built works as we desired. But the problem is, because all testfiles are ran in a large single context, one failing component fails the whole suite.
In normal cases this is a behaviour i would support, but in our circumstances i do not see any proper solution than log the error / fail the single testcomponent and run on.
Example:
I run a test, which is setUp like described above and in this part:
/* Single tests for every resolution and link */
casper.each(testfiles, function(self, actTest, k) {
casper.then(function() {
require('.'+actTest);
});
});
we include 2 testfiles looking like the following:
Included testfile1.js
casper.then(function () {
casper.waitForSelector(x("//a[normalize-space(text())='Atoms']"),
function success() {
casper.test.assertExists(x("//a[normalize-space(text())='Atoms']"));
casper.click(x("//a[normalize-space(text())='Atoms']"));
},
function fail() {
casper.test.assertExists(x("//a[normalize-space(text())='Atoms']"));
});
});
Included testfile2.js
casper.then(function () {
casper.waitForSelector(x("//a[normalize-space(text())='Buttons']"),
function success() {
casper.test.assertExists(x("//a[normalize-space(text())='Buttons']"));
casper.click(x("//a[normalize-space(text())='Buttons']"));
},
function fail() {
testutils.createErrorScreenshot('#menu > li.active > ul > li:nth-child(7)', tempCaptureFolder, casper, 'BUTTONGROUPS#2-buttons-menu-does-not-exist.png');
casper.test.assertExists(x("//a[normalize-space(text())='Buttons']"));
});
});
So if the assert in testfile1.js fails, everthing failes. So how can i move on to testfile2.js, even if the first fails? Is this possible to configure? Can it be encapsulated somehow?
FYI, this did not work:
https://groups.google.com/d/msg/casperjs/3jlBIx96Tb8/RRPA9X8v6w4J
Almost similar problems
My problem is almost the same like this here:
https://stackoverflow.com/a/27755205/4353553
And this guy here has almost another approach i tried but got his problems too because multiple testsuites ran in a loop occuring problems:
groups.google.com/forum/#!topic/casperjs/VrtkdGQl3FA
MUCH THANKS IN ADVICE
Hopefully I understood what you ware asking - is there a way to suppress the failed assertion's exception throwing behavior?
The Tester's assert method actually allows for overriding the default behavior of throwing an exception on a failed assertion:
var message = "This test will always fail, but never throw an exception and fail the whole suite.";
test.assert(false, message, { doThrow: false });
Not all assert helpers have this option though and the only other solution I can think of is catching the exception:
var message = "This test will always fail, but never throw an exception and fail the whole suite.";
try {
test.assertEquals(true, false, message);
} catch (e) { /* Ignore thrown exception. */ }
Both of these approaches are far from ideal since the requirement in our cases is to not throw for all assertions.
Another short term solution that requires overriding the Tester instance's core assert method is (but is still quite hacky):
// Override the default assert method. Hopefully the test
// casper property doesn't change between running suites.
casper.test.assert =
casper.test.assertTrue = (function () {
// Save original assert.
var __assert = casper.test.assert;
return function (subject, message, context) {
casper.log('Custom assert called!', 'debug');
try {
return __assert.apply(casper.test, arguments);
}
catch (error) {
casper.test.processAssertionResult(error.result);
return false;
}
};
})();
That said, I'm currently looking for a non-intrusive solution to this "issue" (not being able to set a default value for doThrow) as well. The above is relative to Casper JS 1.1-beta3 which I'm currently using.
If there a way to perform .click() after the element become visible.
My function chain is built like that:
this.remote.findByXpath("//div[#data-index='blockContainer']/button[text()='Create new']").then(function(element) {
return element.click().end();
})
Sometimes I got error says 'the element is not visible', is it possible to perform click after the element displayed in browser? I know Leadfoot supplies pollUntil to do similar thing but I don't want to execute xpath at browser side, instead of I want to do until at running server side.
To solve my problem I tried following two ways but doesn't help:
I tried to pass Leadfoot Element to browser side script and check if it is visible. But it seems browser side code doesn't recognize leadfoot/element object.
command.find(...).then(function(element) {
return command.then(pollUntil(
function(element) {
if (element.style.display == 'none') return null;
return true;
}, [element], 60000, 500)).then(function(el){
});
}).click().end();
Also tried to customize pollUntil myself but doesn't work as well
function pollVisible(element, timeout) {
var dfd = new Deferred();
var endTime = Number(new Date()) + timeout;
(function poll() {
element.isDisplayed().then(function (displayed) {
if (displayed) {
dfd.resolve();
}
else if (Number(new Date()) < endTime) {
setTimeout(poll, 500);
}
else {
var error = new Error('timed out; final url is ' + url);
dfd.reject(error);
}
});
})();
return dfd.promise;
}
You've probably had an answer to this by now but here's my solution to this just in case you're still unsure or if anyone else comes across this issue.
I'm not sure why you are polling until an element is visible here. What I would do is set the find timeout of your leadfoot/Session as follows:
this.remote.setFindTimeout(60000)
Then when you invoke the this.remote.findByXPath method, it will automatically search for your element for a maximum of 1 minute (in the case of my above example). If it finds the element within that time, it will then proceed to the next step in your code. If it doesn't find the element within that time, the test case will time out.
You can then simplify your code to (for example):
this.remote
.setFindTimeout(60000)
.findByXpath("//div[#data-index='blockContainer']/button[text()='Create new']")
.click()
.end();
Of course there's no need to set the find timeout every time you wish to find an element in the UI. You can set it once somewhere more appropriate (ie. at the beginning of your test) and it will remain in place for the duration of your test. I'm just doing it here as a means of documenting a full example for you.
Hope this helps!
I've got a problem where I can't seem to set the viewport for PhantomJS from within Node.js, using Phantom-Proxy as the module I'm using to bridge the two.
I've successfully got it all taking screengrabs of Web pages but like I've said above, I just can't set the viewport size.
In the Phantom-Proxy docs it says I should set the viewport property like:
//set viewport size for browser window
proxy.page.set('viewportSize',
{ width:320, height:480 }, function (result) {
console.log(result.toString().cyan);
worldCallback.call(self);
});
So in my code, I've tried setting the viewport above the lines that actually take the screengrab:
module.exports = function (app, phantom) {
app.get('/url/:url/:width?/:height?', function (req, res) {
phantom.create({"debug": true}, function (proxy) {
var page = proxy.page;
page.set('viewportSize', { width: 320, height: 480 }, function (result) {
console.log(result);
});
page.open(req.params.url, function () {
page.waitForSelector('body', function () {
page.renderBase64('PNG', function (img) {
res.set('Content-Type', 'image/png');
res.end(new Buffer(img, 'base64'), 'binary');
});
});
});
});
});
};
Though I didn't think this would work, so I tried putting the page.open inside page.set's callback and it got ignored, and also tried putting page.set inside page.open's callback and then page.waitForSelectorinside that.
The viewport still seems to be ignored though!
Any help would be greatly appreciated with this! Thank you all
Turns out it was working all along.
Basically, although the viewport was set correctly, that does not mean the Web page will necessarily be the width and height of the viewport (unless for example; the body had a width of 100%).
The Web page would scroll within the viewport, so the whole page is still rendered.
I'm not good at JS and I'm having some -I hope- stupid problem I'm not seeing on my code... if you guys could help me out, I'd really appreciate it.
My extension does some stuff with the current tab's URL. It worked ok using the onUpdate event on my background page, setting the tab's URL on a variable and then I used it on a pop-up.
The thing is that if the user starts, selecting different tabs, without updating the URLs my event won't be triggered again... so I'm now also listening to the onSelectionChanged event.
The thing is that there's no "tab" object within the onSelectionChanged event's parameters, so I cannot ask for the tab.url property.
I tried to use the chrome.tabs.getCurrent() method, but obviously I'm doing something wrong... and I reached the limit of my -very little- knowledge.
Here's the code, if you guys could take a look and point me in the right direction, I'll really appreciate it.
<script>
var tabURL = '';
var defaultURLRecognition = [ "test" ];
// Called when the url of a tab changes.
function checkForValidUrl(tabId, changeInfo, tab) {
//THIS IS WHAT'S NOT WORKING, I SUPPOSE
if (tab==undefined) {
chrome.tabs.getCurrent(function(tabAux) {
test = tabAux;
});
}
//
// If there's no URLRecognition value, I set the default one
if (localStorage["URLRecognition"]==undefined) {
localStorage["URLRecognition"] = defaultURLRecognition;
};
// Look for URLRecognition value within the tab's URL
if (tab.url.indexOf(localStorage["URLRecognition"]) > -1) {
// ... show the page action.
chrome.pageAction.show(tabId);
tabURL = tab.url;
}
};
// Listen for any changes to the URL of any tab.
chrome.tabs.onUpdated.addListener(checkForValidUrl);
// Listen for tab selection changes
chrome.tabs.onSelectionChanged.addListener(checkForValidUrl);
</script>
I would do something like this:
function checkForValidUrl(tab) {
//...
}
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
if(changeInfo.status == "loading") {
checkForValidUrl(tab);
}
});
chrome.tabs.onSelectionChanged.addListener(function(tabId, selectInfo){
chrome.tabs.getSelected(null, function(tab){
checkForValidUrl(tab);
});
});