I use CodeceptJS with webdriver.io as helper to do e2e test for a website. There is a ul (unordered list) and I want to scroll down to this list. There is scroll bar and I used buttonDown and buttonUp methods on the scroll bar to perform but couldn't figure it out.
Thanks in advance.
To scroll down:
client
.url('https://www.yourwebsite.com')
.leftClick('#yourtable') // <-- should also work with .click()
.scroll(0, 500) // the higher the more we scroll
to use keys make sure to click on the list div box before that the emulated mouse is at the item you want to scroll down. Then you can press the down key to go down:
/*
\uE014 "ArrowRight"
\uE015 "ArrowDown"
*/
client
.leftClick('#yourtable') // <-- should also work with .click()
.keys('ArrowDown')
.keys('ArrowDown')
.keys('ArrowDown')
// or
.keys('\uE015')
.keys('\uE015')
.keys('\uE015')
Source: api/protocol/keys.html
Related
In my recent Cue Project, I have following situation:
I've got a weather div which, when editing-mode is enabled, has a delete- span on the bottom left which contains the ref="edit" attribute (Look here).
On the outer div, there's an click event with #click="eventHandler"
The eventhandler looks like this:
eventHandler(e){
if(e.target !== this.$refs.edit){
this.$router.push({name: "Weather", params: {city: this.city.city}} )
}
}
The event handler should not fire when clicking on the edit-span on the bottom left, so he if-condition above should test this.
But when logging both, e.target and this.$refs.edit to the console, it shows that one is a html-element and the other a proxy.
So is there any good way to test in vue3, whether the click was on the edit-element or not to only fire the router-algorithm when the click was not on it?
Thanks for your help!
I was trying to create some POC to try something with jwplayer but for some reason full screen for jwplayer is not working.
Is there any way to make full-screen work in jsfiddle in jwplayer?
Here is my jsfiddle
http://jsfiddle.net/hiteshbhilai2010/6YyXH/63/
Answering too late, but as no share button is available now, the new way for going full screen is copying the URL of your fiddle and append /show to it.
Example : https://fiddle.net/xyz123/show/
This will show you only the result frame in full screen.
You can click on Share button, then take the Full screen result URL, open it, go to full screen in player and then (optionally) click on F11
Another quick way: right click on jsfiddle result --> View frame source --> In the view source tab take the iframe URL and open it, the player full screen should work. If you are intending to use the fiddle as a demonstration, you can write some javascript to grab the url of the underlying iframe and open it in a new window.
In firefox only:
Right-Click the result window in Jsfiddle
Select "This Frame"
Select "Show Only This Frame"
Page will reload with result only in full screen (without a "run this fiddle" banner in it.)
Sometimes however this won't work, I not shure why, but you can always add "/show" to the URL as Zameer Fouzan has said.
If you don't want to see the "Edit in Jsfiddle" button you can always remove it:
Add "/show" to the URL and press ENTER
Press "run this fiddle" button
Press F12 to enter developer mode in FireFox or Chrome
In firefox press: CTRL + SHIFT + C to pick an element from the page
Press the "Edit in Jsfiddle" button, the corresponding code will be highlighted
Right-Click the highlighted line of code
Select "Delete Node"
Press F12 to close developer mode
Open your browser's console and run this:
const div = document.createElement('div')
div.classList.add('actionItem', 'visible')
div.style.cursor = 'pointer'
const a = document.createElement('a')
a.innerText = 'Fullscreen'
a.classList.add('aiButton')
a.title = 'Fullscreen'
a.addEventListener('click', function() {
document.querySelector('iframe[name=result]').requestFullscreen()
})
div.appendChild(a)
document.querySelector('.actionCont').insertBefore(div, document.getElementById('app-updates'))
This will add a button with the text "Fullscreen" next to the "Embed" button. If you click on it, your browser should fullscreen the result.
Or, if you don't want to paste something in the browser console every time you go to edit a fiddle, use a userscript:
// ==UserScript==
// #name JSFiddle Fullscreen
// #match *://jsfiddle.net/*
// #version 1.0
// #author GalaxyCat105
// #description Adds a fullscreen button in the JSFiddle navigation menu when editing a fiddle
// #grant none
// ==/UserScript==
const div = document.createElement('div')
div.classList.add('actionItem', 'visible')
div.style.cursor = 'pointer'
const a = document.createElement('a')
a.innerText = 'Fullscreen'
a.classList.add('aiButton')
a.title = 'Fullscreen'
a.addEventListener('click', function() {
document.querySelector('iframe[name=result]').requestFullscreen()
})
div.appendChild(a)
document.querySelector('.actionCont').insertBefore(div, document.getElementById('app-updates'))
Create a new script in your favorite userscript manager and copy-paste the code into it.
Background: a third party web application with a requirement on the order page to explicitly guide staff when a certain category of product is ordered.
Normal process:
select product to add order line (click on product image)
New process:
select product to add order line (click on product image)
[add on] simulate click on edit order line
[add on] simulate clear of default additional information form fields
enter additional information and click save
Note that the two steps to be performed by the add-on could be performed by the user however when things get busy or new staff begin is often the case that the order gets processed with the default value.
Any pointers in the right direction would be appreciated.
A multi-browser solution is preferred but not essential.
I am an experienced developer, including web development, but have no experience in browser add on/extension development.
Thanks.
You can make an addon out of this very easily. You addEventListener to the gBrowser and if the event.target is the product element then preventDefault so the click doesnt go thru (you will have to do mousedown and mouseup prevent as well). Then rather get the id of the "edit order line" and do .click() if that doesnt work and you really need to simulate use MouseEvent:
MDN :: MouseEvent
MDN :: Initatite/Dispatch MouseEvent
To enter aditional information get the id of the fields, and set their value. Then get the "Save" button id and then do .submit() or .click()
i said do get id in this post but you can use querySelector and go by css selector
see this page here on how to interact with content in currently selected tab:
https://developer.mozilla.org/en-US/Add-ons/Code_snippets/Tabbed_browser
basically just do gBrowser.contentDocument.getElementById
I've spent some time simplifying the code to get a simple example of the problem. I'm using Dojo 1.6.1. I've a TabContainer defined on my page. Dinamically, I add to it two tabs, each one of them contains an EnhancedGrid with a rowMenu(right click). The issue is that the menu does not work correctly on IE8 if the TabContainer is defined to use all the space available on the page. If I use a specific height and width, it works fine. By not working correctly I mean the following: The menu is pretty simple; it has just two MenuItem, one of them is a PopupMenu that shows a submenu, as follows:
If the TabContainer takes all the available width and height, the menu does something very strange. First, if you do a right click over a row, it does not do anything. You need to a second right click. Then the menu shows, but when you open the submenu, the main menu disapears, and the submenu does not work. It keeps floating around until you navigate to other page:
When it fails, it throws a javascript error saying "'undefined' is null or not an object", on the line 208 of dojox/grid/_FocusManager.js
[...]
_scrollHeader: function(currentIdx){
var info = null;
if(this._colHeadNode){
var cell = this.grid.getCell(currentIdx);
info = this._scrollInfo(cell, cell.getNode(0));
}
[...]
I've tried to create a jsfiddle sample, but Dojo 1.6.1 is not available there, and with Dojo .1.6.0 the behaviour is diferent (You need to do a left click on the row and then a right click, and then the menu works fine), so I've created a simple HTML sample you can see on http://pastebin.com/jDNFQxrP. To see the difference you just need to change the commented TabContainer at the bottom of the code. Has someone seen this before?
Thanks
JL
I have a Menu widget that I want to display whenever the user clicks on specific dom elements, but I don't want a MenuBar. What's the best way to do this? I've tried attaching click handlers to the relevant DOM elements and having the click handler display the Menu, but I can only get it to display the Menu in the area where the original declarative markup would have been rendered. I can't get it to move at all. I'm attempting to use dojo.style(myWidget.domNode, 'top', calculatedTop) (and the equivalent with 'left'). What (obvious thing) am I missing?
Thanks.
Since you are using the dijit's default menu widget, I would think that you just need to specify the property targetNodeIds on the Menu Widget (reference) to define where the context menu is relevant:
targetNodeIds (Defined by dijit.Menu)
Array of dom node ids of nodes to attach to. Fill this with nodeIds upon widget creation and it becomes context menu for those nodes.
To get the popup showing on left click I believe you'd want to use the property leftClickToOpen:
// leftClickToOpen: [const] Boolean
// If true, menu will open on left click instead of right click, similiar to a file menu.
//defaults to false
leftClickToOpen: false,
Specifying this declaratively would look like:
<div data-dojo-type="dijit.Menu" data-dojo-props="targetNodeIds: ['nodeId1','nodeId2','nodeId3'], leftClickToOpen:true"
style="display: none;">
<!-- Your content here -->
</div>