To be independent of static text I want to check the RGB value of a selector.
I found
const opacity = await selector.getStyleProperty('opacity');
await t.expect(opacity).eql(1, {timeout: 5000})
The element to that will change is:
<div class="cl-asset-wfstate" style="background-color: rgb(244, 159, 79);"></div>
<div class="cl-asset-wfstate" style="background-color: rgb(92, 195, 55);"></div>
So I tried
const bgcolour = await Selector('div.cl-asset-wfstate').getStyleProperty('background-color');
await t.expect(bgcolour).eql('rgb(92, 195, 55)', {timeout: 5000})
But this does not work. The assertion will never be resolved.
Any suggestion?
If I understood you correctly, you have the div element, which changes its color during the test execution.
If so, you do not need to execute this line:
const bgcolour = await Selector('div.cl-asset-wfstate').getStyleProperty('background-color')
because in this case the bgcolour variable will contain a value that will not change.
I modified your example to demonstrate how to implement your scenario:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="cl-asset-wfstate" style="background-color: rgb(0, 0, 0);">test</div>
<script>
setTimeout(function () {
document.querySelector('div').style.backgroundColor = 'rgb(92, 195, 55)';
}, 3000);
</script>
</body>
</html>
Test code:
import { Selector } from 'testcafe';
fixture `fixture`
.page `../pages/index.html`;
test('1', async t => {
const selector = Selector('div.cl-asset-wfstate');
const opacity = await selector.getStyleProperty('opacity');
await t.expect(opacity).eql('1', {timeout: 5000});
await t.expect(selector.getStyleProperty('background-color')).eql('rgb(92, 195, 55)', {timeout: 5000})
});
See also: Selector Object
Related
I want to update {{info}} value when the API is response.
But I don't know why there could be console log the response but cannot update the variable.
Any mistake I have make?
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue#next"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<p>{{info}}</p>
</div>
</body>
</html>
<script>
const { reactive,createApp, ref } = Vue;
const app = {
setup(){
info="waiting......";
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => (this.info = response))
.then(response => (console.log(response)));
return {info};
}
}
const myVue = Vue.createApp(app).mount("#app");
</script>
here is a working example. If you want to use the composition API you have to make info a reactive variable with ref or reactive.
in this case you have to assign the new data to your reactive variable with the .value notation: info.value = data
composition API
const { createApp, onMounted, ref } = Vue;
const app = createApp({
setup() {
let info = ref('warning...')
onMounted(() => {
fetch('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => response.json())
.then(data => {
info.value = data
});
})
return {
info
}
}
});
app.mount("#app");
<script src="https://unpkg.com/vue#next"></script>
<div id="app">
<p>{{info}}</p>
</div>
options API
Vue.createApp({
data() {
return {
info: 'warning...'
}
},
mounted() {
fetch('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => response.json())
.then(data => {
this.info = data
});
}
}).mount('#options-api')
<script src="https://unpkg.com/vue#next"></script>
<div id="options-api">
<p>{{ info }}</p>
</div>
console log the response but cannot update the variable
you have mixed the style from the composition API with the options API.
your code this.info = response will work with the options API (see my second example.) if you want to use the composition API you have to write info.value = response (see my first example).
note: I use the mounted hook only for demonstration purposes.
one of workaround, using vue 2........
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<p>{{info}}</p>
</div>
</body>
</html>
<script>
new Vue({
el: '#app',
data () {
return {
info: null
}
},
mounted () {
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => (this.info = response))
}
})
</script>
I think you need to declare a reactive variable via "reactive" in Vue3.
such as:
enter code hereconst app = {
setup(){
// if your request return a value. otherwise, use as below
// let info = reactive({});
let info = ref("waiting......");
axios
.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(response => (this.info = response))
.then(response => (console.log(response)));
return {info};
}
}
As described in the composition API documentation, you need to use ref.
I.e. your code should be
const info=ref("waiting......");
Otherwise, it is just a normal JavaScript variable, and the "reactive magic" of Vue which re-renders the view does not kick in when you change the value. Please note that in some contexts, Vue does automatically make objects reactive, e. g. for data and props when you use the normal components syntax. But for teh composition API, you have to take care of that yourself.
I am trying to build a React Native app using expo and firebase authentication. The email/password authentication is working fine but the phone number authentication is failing because of the applicationVerifier.
I have tried to use 'react-native-firebase' but that is also not working and giving error.
[Error: RecaptchaVerifier is only supported in a browser HTTP/HTTPS environment with DOM support.]
Thanks.
You need to make .html file and put this code..
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>Entering captcha</title>
</head>
<body>
<p style="text-align: center; font-size: 1.2em;">Please, enter captcha for continue<p/>
<button id="continue-btn" style="display:none">Continue to app</button>
<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.10.1/firebase-auth.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyCy6HyqIV5Q_A5lllIxZgePSmKq-Q8eqiw",
authDomain: "onsignledemo.firebaseapp.com",
databaseURL: "https://onsignledemo.firebaseio.com",
projectId: "onsignledemo",
storageBucket: "onsignledemo.appspot.com",
messagingSenderId: "223114260821"
};
firebase.initializeApp(config);
</script> <script>
function getToken(callback) {
var container = document.createElement('div');
container.id = 'captcha';
document.body.appendChild(container);
var captcha = new firebase.auth.RecaptchaVerifier('captcha', {
'size': 'normal',
'callback': function(token) {
callback(token);
},
'expired-callback': function() {
callback('');
}
});
captcha.render().then(function() {
captcha.verify();
});
}
function sendTokenToApp(token) {
var baseUri = decodeURIComponent(location.search.replace(/^\?appurl\=/, ''));
const finalUrl = location.href = baseUri + '/?token=' + encodeURIComponent(token);
const continueBtn = document.querySelector('#continue-btn');
console.log(finalUrl);
// continueBtn.onclick = (event)=>{
// window.open(finalUrl,'_blank')
// }
continueBtn.style.display = "block";
}
document.addEventListener('DOMContentLoaded', function() {
getToken(sendTokenToApp);
});
</script>
</body>
</html>
and put this file in to your running server and load your URL in to react- native Webview before sending confirmation code and after verify this CAPTCHA send confirmation code...
I'am visiting certain websites with phantomjs. Is it possible to run functions from sites environment in page.evaluate method? Can you provide and example of correct usage.
Yes, of course it is possible. You just call the site function inside of page.evaluate. Consider the example:
example.com html
<html>
<head>
</head>
<body style="background-color: white">
<p>A page</p>
<script>
function makeRed() {
document.body.style.backgroundColor = "red";
}
</script>
</body>
</html>
PhantomJS script
var page = require('webpage').create();
page.viewportSize = { width: 600, height: 300 };
page.open('http://example.com', function() {
page.evaluate(function(){
makeRed();
});
setTimeout(function(){
page.render('red.png');
phantom.exit();
}, 1000);
});
Result:
I want to display a map with markers. When I click on a marker, I want to display a popup. In the popup there should also be a link to an external website.
This all works fine so far.
But when I click on the first marker (-> the popup is displayed) and directly afterwards on the second marker, then a popup is displayed only shortly on the second marker and then disappears!
I think it has something to do with the "animation" setting of the popover. But when I set "animation: false", then I can not use the links anymore (I can click on them, but they do not open the requested website).
Here comes my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Popup</title>
<link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v4.5.0/build/ol.js"></script>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div id="map" class="map"></div>
<div id="popup"></div>
<script>
var place_0 = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([1.1, 50])),
name: 'placename 1<br><a target="_blank" href="http://www.fairtragen.de">link1</a>'
});
var place_1 = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([1.2, 50])),
name: 'placename 2<br><a target="_blank" href="http://www.fairtragen.de">link2</a>'
});
var vectorSource = new ol.source.Vector({
features: [place_0, place_1]
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource
});
var rasterLayer = new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
layers: [rasterLayer, vectorLayer],
target: document.getElementById('map'),
view: new ol.View({
center: ol.proj.fromLonLat([1.1, 50]),
zoom: 10
})
});
var element = document.getElementById('popup');
var popup = new ol.Overlay({
element: element,
stopEvent: false
});
map.addOverlay(popup);
// display popup on click
map.on('click', function (evt) {
$(element).popover('destroy');
var feature = map.forEachFeatureAtPixel(evt.pixel,
function (feature) {
return feature;
});
if (feature) {
var iname = feature.get('name');
var coordinates = feature.getGeometry().getCoordinates();
popup.setPosition(coordinates);
$(element).popover({
'animation': true,
'html': true,
//'delay': 1000,
'content': iname
});
$(element).popover('show');
} else {
$(element).popover('destroy');
}
});
</script>
</body>
</html>
the problem is click event works for the overlay and map together. events pass through every element on the map with Openlayers. You can prevent this with stopEvent option on Overlay.
https://openlayers.org/en/latest/apidoc/module-ol_Overlay-Overlay.html
var popup = new ol.Overlay({
element: element,
stopEvent: true
});
I would like to use html2canvas but it is not clear enough how to use it in the documentation. What libraries I should include ? and then is this peace of code just what I need ? What about the proxy ? and How I could save the screen shot after it's taken ?
$('body').html2canvas();
var queue = html2canvas.Parse();
var canvas = html2canvas.Renderer(queue,{elements:{length:1}});
var img = canvas.toDataURL()
window.open(img);
For me, it was working this way:
$('#map').html2canvas({
onrendered: function( canvas ) {
var img = canvas.toDataURL()
window.open(img);
}
The current latest version works this way:
html2canvas($('#map'),
{
onrendered: function(canvas) {
cvs = canvas.toDataURL('image/png');
window.open(cvs)
}
});
Here's a minimal, complete example that shows how to convert the DOM to canvas with html2canvas, convert the canvas to base64, and finally trigger a download.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<body>
<h1>Hello World</h1>
<script>
(async () => {
const canvas = await html2canvas(document.body);
const base64 = canvas.toDataURL();
const a = document.createElement("a");
a.href = base64;
a.download = "html2canvas-test.png";
a.click();
})();
</script>
</body>
</html>
I'm not sure what you mean about a proxy.