So i've been playing around with this guys tutorials, takeing elements from each one into a single app. https://mackenziechild.me/12-in-12/
in this specific tutorial https://mackenziechild.me/12-in-12/7/ we make categories with the rails console
now cause im adding it on top of his reddit clone, with a sidebar added in from his blog, i cant just copy paste his application.html.erb (well he uses haml in this one, but his first two i copied used erb, so im sticking with it instead of rewriting everything)
My problem comes in that i tinkered with the categories in the application.html for like 2 hours couldn't get them nice, so i just threw list tags over the category line cause it was the only way i could figure it out that sorta worked
but now i want to add in a few more categories on top of my existing 4, and the list of categories are gonna take up too much room at this point, i figure a dropdown is fine, but cant figure it out
in the application.html i got
<div id="content" class="col-md-9 center-block">
<% Category.all.each do |category| %>
<li><%= link_to category.name, links_path(category: category.name) %></li>
<% end %>
What can i do?
select_tag "categories", options_from_collection_for_select(Category.all, "id", "name")
You can learn more about this here.
Related
I am new to automation, and my previous experiences were with non-Angular apps, thus i start to use Protractor.
I want to navigate throught the website, though cannot find the right selector.
The button is highlighted in red on the bottom of the screen:
I've tried below code among many:
element(by.name('Flota')).click()
or
element(by.css('.ng-tns-c11-5')).click()
element(by.css('div[title=Flota]'));
maybe you should target the <a> or <nb-icon> element instead?
Try the following locators:
using a:
element(by.css('.ng-tns-c11-16.ng-star-inserted.active'));
or nb-icon:
element(by.css('.menu-icon.ng-tns-c11-16.ng-star-inserted'));
Additionally, if you need to target the <span> element:
element(by.css('.ng-tns-c11-16.ng-star-inserted.active span'));
I suggest
by.css("a[title='Flota']") //if this is the button you are looking for
Since the shorter is locator - the better
your help was much appreciated!
Unfortunately, i tried all options you provided and didn't work, though i made additional trial and error runs.
The code i worked out is below, maybe it will help another newbie like me:
element.all(by.css('#menu-item ng-tns-c11-4 ng-star-inserted li')).click()
I am trying to find out if anyone has an approach to automated UI testing on Material UI components.
Material UI elements are rendered as nested divs with very little unique id information, for example:
<div data-reactroot style="...">
<div style="...">
<div style="...">
</div>
</div>
</div>
The nested div structure makes using traditional location methods difficult if not impossible - (Selenium and Watir), id, name, class, etc.
Using react devtools, one can see a much clearer picture of how the page is structured, but I am not yet able to access the React "DOM" to locate elements.
Any ideas or help would be appreciated.
Added example:
Sliders
I can't come up with an example that is more descriptive than the one above, could literally be 10 layers of nested divs without any text.
There is no general method I'm aware of, unfortunately.
Some of the components already have ids, which allows you to use a css selector like #my-component input (which is usually enough to get an exact field), others have custom class names to be added (like AutoComplete - popoverProps) which allows you to use a similar selector.
Good news is that every MaterialUI component provides className, which can be used to locate elements (at least partially) - details can be found at http://www.material-ui.com/#/customization/styles
Also id field works quite often, even when not documented.
At the last resort (if detection by class + other css selector parts is not sufficient) you can fall back to XPath expression using element text - for example, I use //span[#class="menu-item"][.//div[contains(text(),"${itemName}")]] for matching menu items. It matches things declared as <MenuItem primaryText={itemName} className="menu-item">
See this minimal demo at GitHub: https://github.com/ErikVerheul/PaletteBugDemo.git
I expected that the code line palette.add(new DefaultTheme()); would do the trick. However, it did not.
When changing the Wicket version to 6.20.0 all works fine.
Did I miss something?
help appreciated,
Erik
Short answer: Remove your paragraph <p> and use a <div> instead of the <span> for the palette.
Long answer
The p paragraph cannot contain other block elements. In Wicket 6.x the palette uses a table to layout the "Available" und "Selected" options. In Wicket 7.x divs are used for that, since tables only should be used for tabular data and not for layouting. Neither tables nor divs are allowed in a paragraph though. I guess browsers are just a bit more forgiving when using tables at wrong places, hence you are seeing a somewhat correct result with version 6.x.
Another problem is that you are using a span tag for your palette. Again, the palette is inserting either a table or several div tags, but neither of these are valid in between the span tag.
So something like this should do it:
<form>
<div class="mystyle">
<div wicket:id="palette"></div>
</div>
...
</form>
Problem SOLVED. Thank you Martin! As a Wicket novice I used a version 6 example not knowing the changes in version 7. The working version is now on GitHub.
It does work fine here: http://examples7-apachewicket.rhcloud.com/compref/wicket/bookmarkable/org.apache.wicket.examples.compref.PalettePage
Please check what is different in your app.
I have two questions. First I am using a spry accordion for this website I'm designing, however its the fist time I've used it so I wanted to know how to turn off the blue box that surrounds it everytime you press on it. Does anyone know? I tried to revise the css but I know its not in there.
My second question is how do I make all the tabs closed when you open the website?
Here is the example of the website, I think it will make it easier to visualize.
Spry Panel Example
Thanks!
Sophie
It actually seems to have nothing to do with spry, what I'd do is add this to your CSS:
.Accordion {
border:none;
outline:none;
}
I figured it out, you actually need to erase the tab index at the beginning of the accordion html code:
<div id="Accordion1" class="Accordion" tabindex="0">
Actually none of the above worked for me, what you have to do is instead of saying border and outline NONE it works best if you apply the background colour. so instead of trying to get rid of it - disguise it. works a treat
Ok, I have a master page which I include an ascx...
<%# register tagname="header" tagprefix="vb" src="~/Views/Controls/Header/Header.ascx" %>
<vb:header id="pageHeader" runat="server" />
The ascx has a site map which uses the MvcSiteMapProvider...
<asp:SiteMapDataSource id="SiteMapDataSource1" sitemapprovider="Secure" showstartingnode="false" runat="server" />
<asp:menu id="headerMenu" DataSourceID="siteMap" orientation="Horizontal" staticenabledefaultpopoutimage="false" runat="server" IncludeStyleBlock="false"></asp:menu>
Everything works nicely and then I needed to pass the model into the control so changed the master page to
html.RenderPartial("~/Views/Controls/Header/Header.ascx", Model)
Now I get a runtime error "Control '2_headerMenu' of type 'Menu' must be placed inside a form tag with runat=server." and Yes I do have a Form tag with runat=server in the master page.
Therefore does anyone know the render differences between these two approaches or any other pointers??
Thanks in advance.
Didn't think MVC will automatically find the ascx in that directory will it?
Yes pretty sure the Control is set up properly and loads OK until it tries to render the asp:menu
Try to not use the relative path but just the name of the partial view
html.RenderPartial("Header", Model);
Now, another important point is to specify what kind of object you are using in your partial view. The first line should be:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<OBJECT-TYPE>" %>
Replace OBJECT-TYPE by the object type.
The problem as one commentor noted is that you are mixing a WebForm control in an MVC view. As the error you are receiving states, the Menu has to be within the child control hierarchy of a <form runat="server"/> control. The MVC helpers such as Html.RenderPartial do not do anything with the control tree. Ideally you should not mix MVC and WebForms controls. It can work in certain situations but fails in others.
I have the same trouble! just posted a question like that! In my opinion the partial rendered page is not aware of the parent page and that's why you get an int instead of the address of the parent page!
In case you want to generate a Static ClientID you can use this feature in .NET 4! It will be easier to code your JavaScript code knowing that the value won't change!