Im struggling to define a Selector in TestCafe that clicks that YES button in the photo below
I can find and click the fist YEs button like
.click(Selector('.c-segmented-control__label').withExactText("Yes"))
However the second Yes button has the same classname so my Script cannot find it, how can I define the Selector for that one? I have tried child, nth and all but it doesnt find it.
Thanks
You can try something similar to below code
const yesButton = Selector('.c-segemented-control__label');
const count = await yesButton.count;
for(let i=0;i<count;i++){
let text = await yesButton.parent().parent().textContent //REACH UNTIL YOU GET PARENT
if(text.includes("YOURTEXT")){
await yesButton.nth(i).click()
}
}
OR You can take top to bottom approach, match you text and find child node by using .child or find
Related
I'm a very basic coding person that needs something to work, but IDK how. I have a website where I have 4 images. When you hover over those img they become slightly darker, but I wish there was a way to show some text as well (preview of how it should work: https://imgur.com/a/r5cOW2R)
Here's the link to my GitHub code: https://github.com/Ezzol/HCI-Portfolio
Can anyone explain to me what I need to do to add that hovereffect you can see in my design at the imgur link?
You would want to use the CSS hover event. Here's a good example on how to do that.
https://www.w3schools.com/howto/howto_css_image_overlay.asp
you probably need to use javascript as well, and do an EventListener to tell when it is being hovered over, and then use .style to change it, for example:
var text = document.getElementById("text");
var exampleimg = document.getElementById("exampleimg");
exampleimg.addEventListener("mouseover", examplechange);
exampleimg.addEventListener("mouseout", examplechangeback);
function examplechange(event)
{
text.style.display = "block";
}
function examplechangeback()
{
text.style.display = "none";
}
add a h1/h2/h3/p element to your page, and give it the id "text" then style it how you want and set the display to none.
As a means to learn, I am trying to build an autocomplete feature. I am following this example:
https://codesandbox.io/s/8lyp733pj0.
I see two issues with this solution:
1.) Conflict with mouse hover and keydown. If I use the keypad to navigate the list the active item gets highlighted and if I use my mouse at the same time another item will get highlighted. This results in 2 highlighted fields.
2.) If i select an item by pressing enter it will fill the input field with the selected text but if I press enter again it will change that text to the index 0 item I believe.
Can someone please help me in understanding how to resolve these issues. I have tried hover and focus for css but it still doesn't achieve the expected outcome.
My approach (not sure if this is the correct one):
If keyboard is being used then the mouse event should be disabled and vice versa.
I've also tried removing this.setState({activeSuggestion: 0}) for the enter event.
Thanks for your help - it's taking me some time to grasp the concepts of state with React.
The onKeyDown function updates correctly the value ofactiveSuggestion. I sugest you to add a scroll in the select when activeSuggestion is not vissible.
In my opinion, you need to update the value of activeSuggestion with theonMouseEnter function.
When you do that, remember to remove the line 32 from styles.css: .suggestions li:hover.
Only the element with .suggestion-active must have the active styles. Not the hovered ones. The idea is that onMouseEnter must update the value of activeSuggestion.
Here is the code:
// Autocomplete.jsx
//in line 84, after function onKeyDown, add:
onMouseEnter = e => {
try {
e.persist();
const currentIndex = parseInt(e.target.dataset.index, 10);
this.setState({ activeSuggestion: currentIndex });
} catch (reason) {
console.error(reason);
}
}
// then, create const onMouseEnter after the render() method:
render() {
const {
onChange,
onClick,
onKeyDown,
onMouseEnter,
state: {
activeSuggestion,
filteredSuggestions,
showSuggestions,
userInput
}
} = this;
// In the li nodes (line 123), add props onMouseEnter and data-index:
<li
className={className}
key={suggestion}
onClick={onClick}
onMouseEnter={onMouseEnter}
data-index={index}
>
{suggestion}
</li>
Remember to remove the line 32 from styles.css: .suggestions li:hover.
Hope it helps.
I'm trying to implement a TinyMCE button that will apply the style of the selection to the entire box. I'm having trouble, though, reading the style of the selection when the selection is buried in a span in a span in a paragraph. Let's consider 'color' for example. Below I have a box with some text and I've selected "here" in the paragraph and made it red.
The HTML for the paragraph is now:
The code behind my button to apply the style of the selection to the box is
var selected_color = $(ed.selection.getNode()).css('color');
console.log("color pulled is ", selected_color);
$(ed.bodyElement).css('color', selected_color);
It doesn't work because the color pulled is black, not red, so the third line just re-applies the black that's already there. (If I replace selected_color in the third line with 'blue' everything goes blue.) So the problem is pulling the color of the current selection.
Does anyone know how I can do this reliably, no matter how buried the selection is?
Thanks for any help.
I also noticed somewhat a strange behavior up and there, with selections of nested span's and div's, but honestly i'm not able to recognize if this is a bug of TinyMCE, a browser issue or a combination of both (most probably).
So, waiting for some more information from you (maybe also your plugin code) in the meanwhile i realized two proposal to achieve what you want: the first plugin behaves like the format painter in word, the second is simply applying the current detected foreground color to the whole paragraph.
As you move throug the editor with the keyboard or mouse, you will see the current detected foreground color highlighted and applied as background to the second plugin button.
Key point here are two functions to get the styles back from the cursor position:
function findStyle(el, attr) {
var styles, style, color;
try {
styles = $(el).attr('style');
if(typeof styles !== typeof undefined && styles !== false) {
styles.split(";").forEach(function(e) {
style = e.split(":");
if($.trim(style[0]) === attr) {
color = $(el).css(attr);
}
});
}
} catch (err) {}
return color;
}
function findForeColor(node) {
var $el = $(node), color;
while ($el.prop("tagName").toUpperCase() != "BODY") {
color = findStyle($el, "color");
if (color) break;
$el = $el.parent();
}
return color;
}
The try...catch block is needed to avoid some occasional errors when a selected text is restyled. If you look at the TinyMCE sorce code you will notice a plenty of timing events, this is a unavoidable and common practice when dealing with styles and css, even more with user interaction. There was a great job done by the authors of TinyMCE to make the editor cross-browser.
You can try out the first plugin in the Fiddle below. The second plugin is simpler as the first one. lastForeColor is determined in ed.on('NodeChange'), so the code in button click is very easy.
tinymce.PluginManager.add('example2', function(ed, url) {
// Add a button that opens a window
ed.addButton('example2', {
text: '',
icon: "apply-forecolor",
onclick: function() {
if(lastForeColor) {
var applyColor = lastForeColor;
ed.execCommand('SelectAll');
ed.fire('SelectionChange');
ed.execCommand('forecolor', false, applyColor);
ed.selection.collapse(false);
ed.fire('SelectionChange');
}
return false;
}
});
});
Moreover: i think there is a potential issue with your piece of code here:
$(ed.bodyElement).css('color', selected_color);
i guess the style should be applied in a different way, so in my example i'm using standard TinyMCE commands to apply the foreground color to all, as i wasn't able to exactly convert your screenshot to code. Please share your thoughts in a comment.
Fiddle with both plugins: https://jsfiddle.net/ufp0Lvow/
deblocker,
Amazing work! Thank you!
Your jsfiddle did the trick. I replaced the HTML with what was in my example and changed the selector in tinymce.init from a textarea to a div and it pulls the color out perfectly from my example. The modified jsfiddle is at https://jsfiddle.net/79r3vkyq/3/ . I'll be studying and learning from your code for a long time.
Regarding your question about
$(ed.bodyElement).css('color', selected_color);
the divs I attach tinymce to all have ids and the one the editor is currently attached to is reported in ed.bodyElement. I haven't had any trouble using this but I have no problem using your
ed.execCommand('SelectAll');
ed.fire('SelectionChange');
ed.execCommand('forecolor', false, applyColor);
Thanks again! Great job!
Seeking a solution to my problem...
I partially found an answer from another thread on here, using this script
$(function () {
$(".myclass").hover(function ()
{}, function ()
{
$(".myclass>li").fadeTo(200, 1)
});
$(".myclass>li").hoverIntent(function ()
{
$(this).attr("id", "current");
$(this).siblings().fadeTo(200, .6);
$(this).fadeTo(300, 1)
}, function ()
{
$(".myclass>li").removeAttr("id");
$(this).fadeTo(200, 1)
})})
When an item in the list is hovered, the script fades all other items out. Original demo is here http://jsbin.com/usobe
This works OK on my site, though the list ( a grid of thumbnails) is part of a bigger slider script, which loads "previews" via ajax. When a list item is clicked a hidden section expands on the page, and the slider script assigns the list item a class "active".
When the hidden section is open I would like the activated thumbnail to remain at 1 opacity, while the rest are faded to .6, exactly as it is with the hover effect using the script above. What I am trying to achieve becomes obvious when you click a thumbnail to activate the ajax script. Is it possible to use the active class to make this happen i.e. if class is not active set to .6 opacity?
Thanks in advance
----EDIT
Thanks everyone for suggestions - I am not having much luck so far! Using the code above, would it be possible to modify it so that when a list item is clicked it holds the specified levels of opacity? That would do nicely, I think. Then I could use onclick I guess to fade all items back to full opacity when the hidden div is closed.
I'm trying to guess how your code work, for what I understand you should do something like this:
// this is the selector that gets the click on the thumbnail
$('li.item').click(function() {
// fade all the thumbnails to op 1.0
$('#li.item').css('opacity', '.6');
// let the active thumbnail to 1.0
$(this).css('opacity', 1);
//show your hidden div
});
Then, when you close the hidden div:
$('div#hiddenDiv').onClose(function()
// about to close
$(this).fadeTo('fast', 1);
});
You could use an on click targeting the zetaThumbs li elements, set the current target to 1 and its siblings to .6
$('.zetaThumbs li').click(function(){
$(this).css({'opacity':1}).siblings().css({'opacity':.6});
})
I have figured out a way to change the style of tabs at run time with following logic:
var cssStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".MyTabs");
cssStyle.setStyle("borderColor", "red");
But here ".MyTabs" class is applicable to all the tabs between first and last tab. As per getStyleDeclaration javadoc, it only accepts "class selector" and "type selector" not the id selector.
How can I change the individual tab style at run time?
(tabNavigator.getTabAt(index) as Button).setStyle("borderColor", 0xFF0000);
This will solve the issue, you can set your own color as value param.
Another user pointed out a method that I had somehow missed, allowing you to access a Tab as a Buttom and style it from there.
var t:Button = theTabs.getTabAt(index);
Tab extends Button, so there may be some things you would need the below solution for, but for basic styling this should be enough.
#Sebastian's answer works for a TabBar, which I know you don't have, as this is the third identical question you've asked. In order to style the tabs on a TabNavigator, you need to access the internal TabBar.
//this import may not auto-complete for you
import mx.controls.tabBarClasses.Tab;
var t:Tab = theTabs.mx_internal::getTabBar().getChildAt(index);
Now you can feel free to set the styles, as shown in Sebastian's answer.
You can call setStyle on the individual Tab's, which u can get by calling TabBar.getChildAt(x) . Check the following link, which illustrates how to achieve the task you are trying to perform. You can also check out this link
private function tabBar_creationComplete():void {
var colorArr:Array = ["red", "haloOrange", "yellow", "haloGreen", "haloBlue"];
var color:String;
var tab:Tab;
var idx:uint;
var len:uint = tabBar.dataProvider.length;
for (idx = 0; idx < len; idx++) {
var i:int = idx % colorArr.length;
color = colorArr[i];
tab = Tab(tabBar.getChildAt(idx));
tab.setStyle("fillColors", [color, "white"]);
tab.setStyle("fillAlphas", [1.0, 1.0]);
tab.setStyle("backgroundColor", color);
}
}