We Keep Coding

web scraping - element not interactable with JS and module "selenium-webdriver"

To continue my script I'm trying to close this small window on this page https://mom.maison-objet.com/fr/marque/16604/britop-lighting-poland?request_type=meeting#xtor=AL-1459
To close it, I'm using JavaScript and the module "selenium-webdriver"
This is what I did:
require("chromedriver");
let swd = require("selenium-webdriver");
let browser = new swd.Builder();
let tab = browser.setChromeOptions().forBrowser("chrome").build();
let tabToOpen =
tab.get("https://mom.maison-objet.com/fr/marque/16604/britop-lighting-poland?request_type=meeting#xtor=AL-1459");
tabToOpen.then(function () {
tab.manage().setTimeouts({ implicit: 1000 })
let click_on_close = tab.findElement(swd.By.css(".icon.icon__cross.lightbox__close"))
;
click_on_close.click()
return;
})
I'm having this error: ElementNotInteractableError: element not interactable.
I don't seem to find how to solve this error. If someone can help me?

Detect QR Code via HTML5 file input in iOS

Based on this issue, it appears that I cannot use one of the many QR Code scanner libraries to embed a web-based scanner on iOS and need to use HTML5 file input. The html5-qrcode library seems to be working well.
However, the iOS camera does not detect the QR Code automatically (at least on my personal device), and I need to 1) trigger the camera, and 2) Select "Use Photo" in order to load the file onto the input element and execute the onChange event.
The default behavior of the iOS camera detects QR Codes automatically.
Is there any configuration which would get the default iOS behavior for the camera to recognize the QR Code and thus skip the extra two steps?
Here's the React input element for reference
<input
type="file"
ref={inputRef}
style={{ visibility: 'hidden' }}
accept="image/*"
id="cameraScanner"
capture />
and the handler
const handler = async (e: ChangeEvent<HTMLInputElement>) => {
const { target } = e;
const { files = [] } = target;
const fileList = files as FileList;
if (fileList.length === 0) {
return;
}
const scanner = new Html5Qrcode(READER_ELEMENT_ID);
const [imageFile] = Array.from(fileList);
// Scan QR Code
try {
const spaceId = await scanner.scanFile(imageFile, false);
processScan(spaceId);
} catch (err) {
handleError(e);
}
};

Beginner question: Two Scripts cancelling each other out?? query selector / function / addEventListener

i'm a beginner in terms of Javascript.
For my project I tried/recreated some tutorials and pasted them in the script Tag in the html file. Now I noticed that 2 of them are not working. It seems like they cancelling each other out: When I delete one script, the other is working and the other way around.
The problem must be pretty basic, but as a beginner I'm not sure what I'm overlooking.
These are the two scripts. The first one is for a toggle button and the second one for the mobile hamburger menu.
var switchButton = document.querySelector('.switch-button');
var switchBtnRight = document.querySelector('.switch-button-case.right');
var switchBtnLeft = document.querySelector('.switch-button-case.left');
var activeSwitch = document.querySelector('.active');
function switchLeft(){
switchBtnRight.classList.remove('active-case');
switchBtnLeft.classList.add('active-case');
activeSwitch.style.left = '0%';
}
function switchRight(){
switchBtnRight.classList.add('active-case');
switchBtnLeft.classList.remove('active-case');
activeSwitch.style.left = '50%';
}
switchBtnLeft.addEventListener('click', function(){
switchLeft();
}, false);
switchBtnRight.addEventListener('click', function(){
switchRight();
}, false);
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');
const links = document.querySelectorAll('.nav-links li');
hamburger.addEventListener("click", () => {
navLinks.classList.toggle("open");
links.forEach(link => {
link.classList.toggle('fade')
});
//burger animation
hamburger.classList.toggle('toggle');
}```

I can only see that you are missing ); at the end of your code, the closing part of hamburger.addEventListener(.
Also i guess these ``` at the end are typos while trying to format your code in the editor here.
Make sure there is no error printed in your browser console.

Problem with building dynamic BottomNavigation NS 6.5

NS 6.5 has been released and there is a new feature: Dynamic Creation of Tabs and Bottom Navigation...
I followed their example but it seems not working, see my code below in a playground:
https://play.nativescript.org/?template=play-js&id=SoGnxo&v=6
Please help to fix if I am doing anything wrong.
Many thanks in advance.

There are multiple issues with your code. Here are all of them explained:
1.You have wrong imports. For example, there is a missing StackLayout import and also a wrong import for the BottomNavigation class.
const Color = require("tns-core-modules/color").Color;
const Label = require("tns-core-modules/ui/label").Label;
const StackLayout = require("tns-core-modules/ui/layouts/stack-layout").StackLayout;
const BottomNavigation = require("tns-core-modules/ui/bottom-navigation").BottomNavigation;
const TabStrip = require("tns-core-modules/ui/bottom-navigation").TabStrip;
const TabStripItem = require("tns-core-modules/ui/bottom-navigation").TabStripItem;
const TabContentItem = require("tns-core-modules/ui/bottom-navigation").TabContentItem;
2.You are creating an "empty" BottomNavigaiton within the XML. That is not needed and could cause trouble (as there are no tabStrip and content items initialized). Remove the BottomNavigation tag from the XML and create it dynamically via the code-behind logic.
3,You are creating bottom navigation via code-behind, but there is no code that actually adds this newly created component anywhere on the page. You could use the content property of the current page.
var bottomNavigaiton = new BottomNavigation();
/* TabStrip creating and adding to BottomNavigation.tabStrip */
let myTabStrip = new TabStrip();
let tabStripItem1 = new TabStripItem();
tabStripItem1.title = "Tab 1";
// To use icon font, you need to have a fonts folder with FontAwesome added in the project
// tabStripItem1.iconSource = `font://${String.fromCharCode(0xf053)}`;
// tabStripItem1.iconClass = "fas"; // e.g., Font Awesome
let tabStripItem2 = new TabStripItem();
tabStripItem2.title = "Tab 2";
// To use icon font, you need to have a fonts folder with FontAwesome added in the project
// tabStripItem2.iconSource = `font://${String.fromCharCode(0xf070)}`;
// tabStripItem2.iconClass = "fas"; // e.g., Font Awesome
myTabStrip.items = [tabStripItem1, tabStripItem2];
bottomNavigaiton.tabStrip = myTabStrip;
/* TabContent items creating and adding to BottomNavigation.items */
let tabContentItem1 = new TabContentItem();
tabContentItem1.content = createContent(1);
let tabContentItem2 = new TabContentItem();
tabContentItem2.content = createContent(2);
let contentItems = [tabContentItem1, tabContentItem2];
bottomNavigaiton.items = contentItems;
/*
Adding the created bottom navigation to the Page content
*/
page.content = bottomNavigaiton;
You don't have a fonts folder that contains the icon fonts (FontAwesome).
See the whole revised example here https://play.nativescript.org/?template=play-js&id=SoGnxo&v=16

Vis.js: Adding showPopup in react style

I have a question to ask regarding vis.js popup option. Currently I am trying to implement it in react style so I was using https://github.com/crubier/react-graph-vis/tree/master/example as a starting point.
I realized that in src\index.js file I can add events array since I realize the select option is in there. However, when I do the following:
const events = {
select: function(event) {
var { nodes, edges } = event;
console.log("Selected nodes:");
console.log(nodes);
console.log("Selected edges:");
console.log(edges);
},
showPopup: function(event) {
document.getElementById('root').innerHTML = '<h2>showPopup event</h2>'+ JSON.stringify(params, null, 4);
}
};
I am not able to trigger the popup even at all. Inside the lib\index.js, I noticed that the code is supposed to loop over the events array:
var _iteratorNormalCompletion2 = true;
var _didIteratorError2 = false;
var _iteratorError2 = undefined;
try {
for (var _iterator2 = Object.keys(events)[Symbol.iterator](), _step2; !(_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done); _iteratorNormalCompletion2 = true) {
var _eventName = _step2.value;
this.Network.on(_eventName, events[_eventName]);
}
} catch (err) {
_didIteratorError2 = true;
_iteratorError2 = err;
} finally {
try {
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
} finally {
if (_didIteratorError2) {
throw _iteratorError2;
}
}
}
}
and I checked that vis.js has the popup option according to the documentation which can be found here: http://visjs.org/docs/network/
I am currently stuck on figuring out how to trigger the popup. There is a requirement to use react since the application will be based on it. It would be great if someone can point out what I did wrong.
Thanks in advance. XD
NOTE: This question is in regards to the github project that I am trying to build on top of. Therefore it is a little different because I am not taking a barebone vis.js

You are mixing things up. showPopup is an event, a function that is called when the popup is shown. You do not call it to show the popup.
To show the popup you simply hover over a node that has a title property.
Check out this fiddle I made (is in pure JS though): http://jsfiddle.net/56t9c0t4/