I need to assert the styles of an element directly from the Dusk tests. In my application, I changed some styles of elements based on a specific condition. e.g. For invalid users, I changed the background to red. Now, I need to assert the css styles from Dusk.
Note that I don't want to check the class attribute. I want to check the styles that the class added to the element.
It has been solved. I used the web driver developed by Facebook. So, using it, I've selected the proper tag using xpath. Then, I get the stylesheet property of the selected tag using the web driver. Here is the source code. Note that adding the facebook web driver is required.
$the_tag = $browser->driver->findElements(WebDriverBy::xpath('//*[#class="user-item d-flex justify-content-between align-items-center mb-3"]'))[0];
$this->assertEquals($the_tag->getCSSValue("background"),"red");
Related
We have a component that has a child component, within that, there is another child (child-2) component added. When in author ui, child-2 component does have style icon (in component action toolbar); however clicking on that renders a blank list.
If that child-2 component is added as independent component style icon as well as list (when clicked on) is also visible (with all styles variation as defined in policy).
We tried various ways to debug it but can not. Can anyone please help us here
AEM style system works by defining the styles in the policies. These policies should use the exact path where the component can potentially be placed.
Example: If the component's path is
/apps/project/components/content/myheader then the policy will be defined at path similar to below
/conf/project/settings/wcm/policies/project/components/content/myheader/policy_xxx.
But this policy definition will be used in a path in a template where you would use your component. For example if your template name is templateA and the name of the responsivegrid where your component myheader will be placed is headerGrid then myheader's policy will be used here:
/conf/project/settings/wcm/templates/templateA/policies/jcr:content/headerGrid/project/components/content/myheader <cq:policy property>.
The styles defined in policy will then only be visible in the above responsive grid (parsys in old language). To allow this styles in any other path, in your temlate create the path as required and use the policy there.
Following the above example, if you want your stlyes to be available in a componentA in the TemplateA where componentA is placed in bodyGrid then use the policy here:
/conf/project/settings/wcm/templates/templateA/policies/jcr:content/bodyGrid/componentA/project/components/content/myheader <cq:policy property>.
This should resolve your problem as tested in my system. Unfortunately there is no sandbox public to show you an example.
Is there a way to change the generic ID on Oracle Apex? I cannot use the id below for the other Modal page containing the said ID will we affected. My solution is to set a different id on this Session Timeout ui-id-2 Modal Page.
Also I am not sure why this code: span#ui-id-2{code..} works when applied on Page CSS inline, but when applied on Static Application Files .CSS it is not working.
Oracle v20.
Yes! You can do it using jQuery, but it will work only in runtime
$("#ui-id-2").attr("id","newId");
And the thing with CSS maybe you need to add !important to override the class.
I'm working in react and have an element that uses CSS modules for styling, like so:
<div className={styles.book__title}>Title: {book.title}</div>
Because class names are hashed, the compiled output is something like:
<div class="book__title_adsfj4">Title: The Lord of the Rings</div>
I've added an event listener on a button that, when pressed, adds the 'title' class to this element to offer additional styling for that specific class, like so:
<div class="book__title_adsfj4 title">Title: The Lord of the Rings</div>
Is there a way where I can either:
append a class to an element and within my css file not have that class be hashed or
add a class to an element that exactly matches the final compiled hash name?
Thanks.
I wrote about the best way I've found to do this here - https://github.com/css-modules/css-modules/issues/199
Basically, it's just importing those styles from the original css file. Because those styles are all hashed the same, no matter if they are imported within different files, the styling will carry over.
When you have some kind of event that triggers a permanent visual change on your element, that means your element has state! And you'll want to use state in React to handle that change.
In React, state is a dictionary on a component that, whenever it changes, triggers a re-render of that component. You can read up on state here: https://reactjs.org/docs/state-and-lifecycle.html
What you'll want to do is add a variable into your state, something like 'buttonPressed' (or whatever you want to call that event or status), and have it be set to true or false depending on if you want the class to be there. When the button is pressed, you'll call this.setState to modify the variable in state and trigger a re-render.
Then, in your render function, you'll simply check what that variable is in your state, and include the class or not, like so:
<div className={styles.book__title + " " + this.state.buttonPressed ? styles.title : ""}>Title: {book.title}</div>
I am new to Angular & Protractor (and web development for that matter), so I apologize of this is an obvious question.
I am trying to test our angular app with protractor, and it appears that I can locate the first element on the page. But cannot find any of the other elements using (id, name, model, css). I have tried chaining off of the first element, but always get the element not found error on the second element in the chain. I've have triple check the spelling so I am confident everything is correct.
Our page is setup up with multiple sections and when I "view source" I only see the root div.
<head>
</head>
<body>
<div ng-app="app" id="wrap">
<div ui-view></div>
</div>
</body>
</html>
But when I inspect the elements using the developer tools (F12), they exist in the DOM, I just don't know how to get to them.
<input type="text" class="form-control ng-valid ng-dirty ng-valid-parse ng-touched" data-ng-model="vm.searchText" id="searchText" placeholder="(Account # / Name / Nickname / Phone #)">
I tried to access the control listed above using the following:
browser.element(by.id("searchText").sendKeys("test");
browser.element(by.model("vm.searchText").sendKeys("test");
element(by.id("searchText").sendKeys("test");
element(by.model("vm.searchText").sendKeys("test");
I also create a single button and used partialButtonText & buttonText, neither of which worked.
I also tried to add some async functionality with "then" but that didn't work either. How do I access these elements are are not contained in a single html file?
thanks.....
If an element is not visible, I believe protractor isnt able to interact with it. It can't click or get text or anything if it is not visible, that is actually checked before it can perform the action.
What you can do is check the element is present to ensure it is somewhere on the html.
var searchText = $('#searchText');
expect(searchText.isPresent()).toBeTruthy('Search Text element not present');
This will find an element with a css selector of id searchText, and then check if it is present(exists on the html).
If you want to interact with it, remember that protractor looks around like a human would. If a human cant click it, neither can protractor! Make sure it is on the page and visible.
Don't have the reputation points to add this in the comments to user2020347's response so...When you say not in "view source" I assume you're talking about dynamically generated content. Instead of using view source either use chrome or firefox developer tools to make sure you're using the right locators.
For example in chrome's console the following should return a result once the page is loaded:
$$('#searchText')
$$('input[data-ng-model="vm.searchText"]')
It also looks like you're sending keys to the same element.
Since you have an angular app protractor should wait for all elements to load, but just in case you might want to wait for the element to be present and/or visible on the page.
Same happened to me, because Protractor executed on the original (first) tab.
Try to switch between the tabs before accessing the elements:
browser.getAllWindowHandles().then(function (handles) {
browser.driver.switchTo().window(handles[1]);
});
I'm looking to get ideas on how to not change at all the code used to create css tabs (so that I can place it into an include file to avoid duplicating the code across all files that use it), but my current implementation doesn't allow this because I need to select the active tab using id="selectedTab".
The only implementation I found so far that solves this is the following one:
http://unraveled.com/publications/css_tabs/
It requires assigning a class to each tab and uses the body id to determine the active tab.
Is this the only way or is there any other alternatives?
My current code looks like this (the id=noajax" is used to avoid using ajax to load certain pages):
<div class="productTabsBlock2">
<a id="selectedTab" href="/link1" >OVERVIEW</a>
SCREENSHOTS
<a id="noajax" href="/link3" >SPEED TESTS</a>
<a href="/link4" >AWARDS</a>
</div>
EDIT: asp is available as server side and is already used on these pages.
If you're looking for a non-JS solution, then the body class/id provide the easiest way to do what you want.
If you have access to JS library, you can easily add "selected" class to any of the <a> element and modify its appearance.
Just in case you haven't notice, you can use more than one class definition in an element. For example, <a class="noajax selected" /> is valid and both CSS selectors .noajax and .selected will be applied to the element.
An include file for what? If it's a server side programming language like PHP, you can pass a parameter for the selected tab through various methods.
you could use jQuery to add the `selectedTab' id (or class) like so
$('.productTabsBlock2 a').mouseover(function () {
$(this).addClass('selectedTab');
});