How to press right arrow in Selenium? - selenium-webdriver

Selenium version 4.7.2
I use Anaconda and installed Selenium over Anaconda wit conda command.
How to press left arrow in Selenium?
My project has below libraries
from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
import random
import time
Code:
I use this code structure it works, it clicks, but i want Selenium to press right arrow on keyboard.
How can i do this?
next = browser.find_element(By.XPATH, "//button[#class='_abl-']//div[#class='_abm0']//*[#aria-label='Next']")
next.click()
I make a search and found this.
Arrow Key – Right
Keys.ARROW_RIGHT
But i have no idea about coding it.
Thanks for your help
Thanks for all comments

To press <- key once you have to use the ActionChains() involving key_down(Keys.ARROW_LEFT) method followed by key_up(Keys.ARROW_LEFT) method as follows:
from selenium.webdriver.common.action_chains import ActionChains
ActionChains(browser).key_down(Keys.ARROW_LEFT).key_up(Keys.ARROW_LEFT).perform()
tl; dr
Link to documentations:
Keyboard actions
selenium.webdriver.common.action_chains

You can try the below code to simulate arrow keys:
from selenium.webdriver import Keys
for Left Arrow:
<WebElement>.send_keys(Keys.ARROW_LEFT)
for Right Arrow:
<WebElement>.send_keys(Keys.ARROW_RIGHT)

Related

intellisense imports components from "bootstrap" instead of "react-bootstrap"

Hi I am not sure if this is about my VScode settings or the way I installed bootstrap. I used yarn to install react-bootstrap and bootstrap as show in react-bootstrap's documentation. But when I type <Button and press enter it automatically imports <Button component like this:
import { Button } from "bootstrap";
this doesn't work. I have to manually fix it to
import { Button } from "react-bootstrap";
is it a bug or did I do something with wrong order?
If you have inline suggestions turned on (Preferences -> Text Editor -> Suggestions), you'll see that Intellisense provides import suggestions alphabetically — first by identifier then by package.
With inline suggestions, you're given a list you can navigate through to select whichever option you're looking for. In this case, you'd type But and it would show the react-bootstrap Button as the second option, so you'd press down arrow and tab to accept that option.

What do I need tvParallaxProperties for? (react-native-elements Icon)

I wanted to use icons in my react-native app, so I installed react-native-elements. The Icons itself work but I have to add a property called tvParallaxProperties on the Icon element like that:
<Icon tvParallaxProperties={undefined} name={'up'} type="antdesign" />
I read the docs and google about that, but I cant find the use of that. Does anyone know why I need this property and whats the use of it?
If you don't want to write this option under all of the Icons there's 2 solutions.
First which I don't recommend if you are creating real project not for training purpose.
Install RN Elements bleeding Edge from docs and the newest BETA version (unstable).
Or which worked for me is change imports of Icons like:
import { Icon } from 'react-native-elements' to: import Icon from 'react-native-vector-icons/AntDesign';. The last element of import of course is your Icons package and you can change it fe. to: MaterialCommunityIcons
After adding this import you can delete option type: antdesign and this tvParallaxProperties={undefined}
Like docs says tvParallaxProperties are for (Apple TV only) Object with properties to control Apple TV parallax effects.

is there any way to automatically import modules in eslint or vscode?

so I created a consoledata.ts file to log whatever I pass in it as an argument like so:
/* eslint-disable no-console */
export default function ConsoleData(props: any) {
console.log(props);
}
now using the VSCode search icon, I changed every console.log in my code to consoleData since it'll probably take me all day to change them one by one.
now my issue is, the consoleData module is not imported. is there a way I can do this?
There are two ways to auto import in VSCode. The first way is using quick fix. If you are on MacOS, you can do Cmd + . to open the quick fix dialog and then you import the module.
The second option is to use auto import suggestions. They show suggestions as you type. If you are on MacOS, select the function/class you want to import and then you can do Ctrl + Space to open the auto import suggestions dialog.

How to convert p5.Something() to fit react

In my file sketch.js before shifting to combined p5 and react, I had a command
amp = new p5.Amplitude();
after shifting to react, the 'p5' method is not defined anymore.
p.Amplitude()/song.Amplitude() isn't doing the job and returns
(TypeError: ... .Amplitude is not a constructor)
I really don't know from where or how import p5. I guess its something to do with the web config but not sure what.
I've npm install both p5 and react-p5-wrapper, and except this line and rest of the things that required amp all the code running as expected, and I can play music/adjust background with sliders etc ...
at the begging of the file I'm importing:
import React from 'react';
import 'p5/lib/addons/p5.sound';
import 'p5/lib/addons/p5.dom';
I will really be glad for little help!
You might be able to try:
import * as p5 from './{library-path}/p5.js';
It looks like P5 was not originally set up for easy ES6 imports.
This GitHub issue from 2016 seems to identify a similar problem. https://github.com/processing/p5.js/issues/1734
More recently it looks like it can be used correctly with NPM:
https://medium.com/front-end-weekly/learning-the-p5-canvas-drawing-library-in-es6-and-webpack-bf514a679544
Also check out this other potential answer here.
How to use React with p5.js

React - Save the work before leaving the page

Using react, I'm trying to prevent the user from leaving a particular page displaying a message and saving his work.
I know that I could use Prompt to display a standard message with ok/cancel buttons, like this:
import { Prompt } from 'react-router'
<Prompt
when={hasToBlockNavigation}
message="Do you want to leave without saving?"
/>
but I'm looking for a way to display a custom component instead of the standard windows and to associate custom functions for the ok/cancel button. I found some other solution using the setRouteLeaveHook function, but it's not supported any more.
Any suggestions?
Thank you.
i believe you can use "react-router-navigation-prompt" which is according to their document :-
Promps user to confirm navigation. A replacement component for the react-router . Allows for more flexible dialogs.
npm i react-router-navigation-prompt
and then use your owm component like below - am using their example .
import NavigationPrompt from 'react-router-navigation-prompt';
import ConfirmNavigationModal from './your-own-code';
<NavigationPrompt when={this.state.shouldConfirmNavigation}>
{({onConfirm, onCancel}) => (
<ConfirmNavigationModal when={true} onCancel={onCancel} onConfirm={onConfirm}/>
)}
</NavigationPrompt>

Resources