I am working on the open source project: Tellurium automated testing framework, which is a web testing framework built on top of Selenium. We leverage jQuery to add jQuery selector as a locator to speed up the test performance in IE and also add other new functionalities. More details could be found at,
http://code.google.com/p/aost/wiki/TelluriumjQuerySelector http://code.google.com/p/aost/wiki/jQuerySelectorCache Basically, we define a UI in the format, for example, ui.Container(uid: "GoogleSearchModule", clocator: [tag: "td"], group: "true"){ InputBox(uid: "Input", clocator: [title: "Google Search"]) SubmitButton(uid: "Search", clocator: [name: "btnG", value: "Google Search"]) SubmitButton(uid: "ImFeelingLucky", clocator: [value: "I'm Feeling Lucky"]) } The framework will automatically generate the runtime jQuery selector based on the UI element attributes. We added the jQuery selector support couple months ago and it worked pretty well. Recently, one user tried to use the style attribute, but the generated jQuery selector did not work for the style attribute. That is why I am looking for a solution to this. Your insightful suggestions are highly appreciated. BTW, we only tested the style attribute in Firefox, but still not working. :(. Thanks, John On Aug 26, 4:34 pm, James <james.gp....@gmail.com> wrote: > As Paolo mentioned, despite how it looks in a browser's source, the > internal representation within the DOM may be different depending on > the browser. > In one browser it could be: > overflow: auto; width: 356px; height: 100px; > > in another it could be: > overflow:auto; width:356px; height:100px; > > in another it could be: > overflow:auto;width:356px;height:100px; > > There's got to be a better way to achieve what you want to do. Since > we have no idea what you're trying to do, maybe you could explain it > as to what the rhyme or reason to the selection sets you're trying to > select is. > Looking at the code you've provided, is it possible to use the ID in > anyway? You could do selections with conditions like "if ID begins > with 'ext-gen'" and other conditions along with that. As long as > you're not trying to read the style string. > > On Aug 26, 4:06 am,John<jian.fang.subscr...@gmail.com> wrote: > > > Thanks. > > > Here is the html source, > > > <div id="x-form-el-ext-comp-1043" class="x-form-element" > > style="padding-left: 130px;"> > > <div id="ext-gen438" class="x-form-field-wrap" style="width: > > 360px;"> > > <input id="programId" type="hidden" name="programId" > > value=""/> > > <input id="ext-comp-1043" class="x-form-text x-form-field > > x-combo-noedit" type="text" autocomplete="off" > > size="24" readonly="true" style="width: 343px;"/> > > <img id="ext-gen439" class="x-form-trigger x-form-arrow- > > trigger" style="overflow: auto; width: 356px; height: 100px;" > > src="images/s.gif"/> > > </div> > > </div> > > > The style in the jQuery selector should match the one defined in the > > html source. I wonder if I > > did any other thing wrong here. > > > Thanks, > > >John > > On Aug 26, 6:45 am, Paolo Chiodi <chiod...@gmail.com> wrote: > > > > Maybe that that the style attribute value should be exactly equal to > > > the one contained in html. I think style="A:B C:D" doesn't match > > > style="C:D A:B". > > > May also be that the browser has an internal rapresentation of the > > > style attribute slightly different from the one written in the html > > > (never tried to see with firebug some differen orders?). > > > > Otherwise if you create the style attribute by using .css('A','B'), > > > you can't be sure of what the entire style attribute could be. > > > > Paolo > > > > On Tue, Aug 25, 2009 at 11:22 PM,John<jian.fang.subscr...@gmail.com> > > > wrote: > > > > > Thanks Maurício for your quick response. > > > > > I have a program to automatically generate jQuery selectors based on > > > > some UI element attributes and seems your syntax is not always > > > > working. For example, > > > > > 1) working: $('div:has(input[type=text][readonly=true], img > > > > [style="overflow: auto; width: 356px; height: 100px;"]) img') > > > > > 2) Not working: $('div:has(input[type=text][readonly=true] > > > > [style="width: 343px;"], img[style="overflow: auto; width: 356px; > > > > height: 100px;"]) img') > > > > > 3) Not working: $('div:has(input[type=text][readonly=true], img > > > > [style="overflow: auto; width: 356px; height: 100px;"]) img > > > > [style="overflow: auto; width: 356px; height: 100px;"]') > > > > > 4) Not working: $('div:has(input[type=text][readonly=true] > > > > [style="width: 343px;"], img[style="overflow: auto; width: 356px; > > > > height: 100px;"]) img[style="overflow: auto; width: 356px; height: > > > > 100px;"]') > > > > > Here "not working" means it returns empty object where it should > > > > return non-empty object. > > > > > Do you know what is wrong? > > > > > Thanks again, > > > > >John > > > > > On Aug 25, 2:50 pm, "Mauricio \(Maujor\) Samy Silva" > > > > <css.mau...@gmail.com> wrote: > > > >> Sintax for the selector is: > > > > >> $('img[style="overflow: auto; width: 356px; height: 100px;"]') > > > > >> Maurício > > > >> -----Mensagem Original----- > > > >> De:John > > > >> Para: jQuery (English) > > > >> Enviada em: terça-feira, 25 de agosto de 2009 14:36 > > > >> Assunto: [jQuery] jQuery selector for style attribute > > > > >> Hi, > > > > >> I want to select the following image using jQuery selector to see if > > > >> I > > > >> could use the style attribute, > > > > >> <img id="ext-gen439" class="x-form-trigger x-form-arrow-trigger" > > > >> style="overflow: auto; width: 356px; height: 100px;" src="images/ > > > >> s.gif"/> > > > > >> but seems the selector > > > > >> img[style=overflow: auto; width: 356px; height: 100px;] > > > > >> does not work at all. What would be the correct selector for the > > > >> style > > > >> attribute? > > > > >> Thanks in advance, > > > > >> John
