busy-window-36430
05/19/2023, 9:43 PMwhite-bird-68512
05/20/2023, 6:18 PMprehistoric-rainbow-62451
05/21/2023, 1:48 PMhttps://cdn.discordapp.com/attachments/1109840034389053460/1109840034598756352/Screenshot_from_2023-05-21_16-45-56.pngβΎ
astonishing-forest-59107
05/21/2023, 7:23 PM.shadow()
method, but it hasn't been successful. I've followed the recommended approach of traversing through parent elements, but I keep encountering errors such as timeouts and undefined properties. Despite stepping through all the parent elements leading down to the target input field, I'm still unable to locate it and interact with it.
I've spent a considerable amount of time troubleshooting and exploring different options, but I seem to be hitting a roadblock. I'm wondering if there might be alternative approaches or techniques that I haven't considered.
The element I'm trying to locate, you can see from the screen sot, is an input field:
I am walking down the DOM and this is as far as I can get before it suddenly can't find any other element:
cy.get('macroponent-f51912f4c700201072b211d4d8c26010')
.should('not.be.visible')
.shadow()
.find('div')
.should('not.be.visible')
.find('sn-polaris-layout')
.should('not.be.visible')
.shadow()
.should('not.be.visible')
.find('div.sn-polaris-layout.polaris-enabled')
.find('sn-polaris-header')
.shadow()
.should('not.be.visible')
.find('nav.polaris-layout')
.find('div.polaris-header.can-animate.polaris-enabled')
.find('sn-polaris-menu.can-animate[aria-label="Unpinned Workspaces menu"]')
.shadow()
.should('not.be.visible');
I have also tried:
cy.get('macroponent-f51912f4c700201072b211d4d8c26010')
.shadow()
.find('sn-polaris-menu.can-animate[aria-label="Unpinned Workspaces menu"]')
.invoke('attr', 'class', 'can-animate is-main-menu is-open');
cy.get('sn-polaris-nav.63242b61c3133010cbd77096e940dd23')
.invoke('attr', 'aria-expanded', 'true');
I even tried manually using keyboard commands, although there's unfortunately no tab command. π
I highly suspect the issue is the menu that needs to be open and visible, is actually located in a different area of the DOM than the filter itself. So, traversing down to the menu and expanding / clicking / focsing / anything, does not allow me to find any other element not directly in that area? But, if I try to just navigate directly to the filter itself, about 75% of the way there, something with the menu's makes it so I can't actually find anything anymore:
In the second screen shot you can see where it stops beyond that .shadow() I can't figure out ANY way to target the child or any other element in that root...
If anyone has experience with or has encountered similar challenges, I would greatly appreciate your guidance and suggestions. It would be incredibly helpful if you could share any insights, alternative approaches, or potential solutions that could help me successfully interact with this input field.
Thank you in advance for your assistance!
https://cdn.discordapp.com/attachments/1109924336355262565/1109924336720150528/image.pngβΎ
freezing-activity-66869
05/21/2023, 11:25 PMfreezing-activity-66869
05/22/2023, 1:24 AMfreezing-activity-66869
05/22/2023, 2:02 AMhttps://cdn.discordapp.com/attachments/1110024832533405706/1110024832696995850/Screenshot_2023-05-21_at_8.00.06_PM.pngβΎ
famous-wire-30070
05/22/2023, 2:12 AMimportant-noon-13871
05/22/2023, 7:10 AMexport default ({
label,
feature,
featureDetail,
size = 'medium',
} => {
const { t, i18n } = useTranslation();
const userInfo:(userInfoProps|null) = useAppSelector(({ root }) => root.userInfo);
const targetCompanyId:string = useAppSelector(({ root }) => root.targetCompanyId);
const openAirtableLink = () =>{
//formUrl will use userInfo & targetCompanyId to build url
window.open(formUrl, '_blank');
}
return (
<Button
className="account-upgrade-button"
size={size}
label={label || t(`general.btn_upgradeAccount`)}
color={standardColor.secondary}
iconImageSize={16}
iconUrl="./circled-up-2.png"
onButtonClick={openAirtableLink}
/>
);
};
I don't know how to mock a variable, function or hook with cypress, there are only few resource for cypress component testing.
Or maybe I should correct my word, what's the boundary for e2e & component testing in cypress? should I really need it or just always do e2e testing?some-room-78246
05/22/2023, 7:38 AMhttps://cdn.discordapp.com/attachments/1110109344084787201/1110109344500027392/Screenshot_49.pngβΎ
careful-finland-33432
05/22/2023, 10:46 AMgorgeous-kite-84316
05/22/2023, 12:02 PMbreezy-night-28671
05/22/2023, 12:10 PMfast-artist-45202
05/22/2023, 3:45 PMrapid-rain-23688
05/22/2023, 4:09 PMechoing-tent-95037
05/22/2023, 6:21 PMe2e
Im using the test example and get a Unexpected reserve word await
. Any ideas on how to fix this?white-salesclerk-96926
05/22/2023, 6:35 PMnice-summer-59524
05/23/2023, 3:19 AMflags
property to the test options.
I've attempted to make that request a couple ways, but each attempt has either failed, or been flaky due to race conditions.
1. Modify cy.visit
using Cypress.Commands.overwrite
, so that flag overrides are applied before each visit.
js
Cypress.Commands.overwrite('visit', (original, url, options) => {
cy.request({
method: 'POST',
url: '/dev/flags/override',
body: Cypress.config('flags') || {},
}).then(() => {
original(url, options);
});
});
This is the most straight forward solution, and seems to correctly apply flags for the first test of each spec. However when this override is applied, an error begins occurring in specs that call visit
in beforeEach
.
CypressError: Timed out retrying after 4050ms: `cy.click()` failed because the page updated while this command was executing.
OR
Timed out retrying after 4050ms: cy.first() failed because the page updated as a result of this command, but you tried to continue the command chain. The subject is no longer attached to the DOM, and Cypress cannot requery the page after commands such as cy.first().
The first test in a spec will pass normally, but each test after that will fail.
I suspected it might be because the newly overwritten visit
command resolves when the override request completes, rather than when the original
call completes. So I tried to address that manually:
js
Cypress.Commands.overwrite(
'visit',
(original, url, options) =>
new Promise((resolve) => {
cy.request({
method: 'POST',
url: '/dev/flags/override',
body: Cypress.config('flags') || {},
}).then(() => {
original(url, options).then(resolve);
});
}),
);
This didn't work because Cypress commands doesn't use promises.
2. Run the flag override request in global before
and beforeEach
hooks
This worked sometimes, but was flaky. My understanding is that due to the way Cypress schedules tasks, it's not possible to guarantee that tasks scheduled in the global before
and beforeEach
hooks would resolve before tasks in the spec's before
and beforeEach
hooks would run. This means if there's any latency in the flag override request, the override would not be ready by the time cy.visit
is called.
js
const requestFlags = () =>
cy.request({
method: 'POST',
url: '/dev/flags/override',
body: Cypress.config('flags') || {},
}),
});
before(() => {
requestFlags();
});
beforeEach(() => {
requestFlags();
});
requestFlags
would need to be run in both before
and beforeEach
, because some of our specs do navigation in a before
hook. In which case, the navigation would occur before the requestFlags
call in the beforeEach
hook. We're working to move away from calling visit
in before
hooks, because we want tests to be better decoupled from each other. But that's a work in progress.
Unfortunately, I cannot provide a reproduction repo at this time, as this is a proprietary project. If needed, I can try throwing together a minimum implementation of a server/client using this flag override approach for the purpose of debugging this and coming to a better solution. Though I'm hoping someone with more Cypress experience might be able to point out what I'm doing wrong / if there's a better approach. Any assistance would be greatly appreciated, thank you πfamous-dog-82296
05/23/2023, 9:52 AMbreezy-night-28671
05/23/2023, 10:32 AMjs
cy.window()
.its('bootstrap.Button.VERSION')
.invoke('startsWith', '4')
.then((bootstrap4) => {
if (bootstrap4) {
cy.log('**Bootstrap 4**')
cy.contains('button.btn-block', 'Save')
} else {
cy.log('**Bootstrap 5**')
cy.contains('button', 'Save')
}
})
CREDIT for above code: @gray-kilobyte-89541quaint-machine-24156
05/23/2023, 10:48 AMambitious-holiday-82276
05/23/2023, 12:08 PMbrief-kite-35331
05/23/2023, 12:46 PMimport "cypress-real-events";
to the index.ts file I got an error for other declarations: TS2315: Type 'Chainable' is not generic.
steep-furniture-84934
05/23/2023, 3:28 PMwide-eye-45012
05/23/2023, 4:39 PMhelpful-receptionist-4197
05/23/2023, 6:47 PM// src/foo.ts
export const FOO = import.meta.url;
In my real code it uses import.meta.url to contrive the path to a file in the 'public' directory. Hard-coding "/path/to/whatever.json" works in prod but doesn't work in cypress component tests which is why i have to use import.meta.url.
foo.ts works fine when imported by the web app and from component tests; problem is only when i also try to access it from cypress e2e test code.
// cypress/e2e/example.cy.ts
import { FOO } from "../../src/foo"; // (also, how do i get the '@' prefix to work?)
describe('My First Test', () => {
it('visits the app root url', () => {
cy.visit('/')
cy.contains('h1', 'You did it!')
})
})
red-horse-88299
05/23/2023, 7:47 PMbefore(() => {
Cypress.automation("remote:debugger:protocol", {
command: "WebAuthn.enable",
params: {
enableUI: true,
},
}).then(() => {
return Cypress.automation("remote:debugger:protocol", {
command: "WebAuthn.addVirtualAuthenticator",
params: {
options: {
protocol: "ctap2",
transport: "internal",
hasResidentKey: true,
hasUserVerification: false,
isUserVerified: true,
},
},
}).then((result) => {
_AUTHENTICATOR_ID = result.authenticatorId;
});
});
cy.clearCookies();
cy.visit(
"/assets/polygon/0xE95C167E3147F2F935E6B90F16694BC9ED4399E4"
);
});
I'm able to successfully get a passkey modal to appear, but I do not know how to tap the button in the modal using Cypress. I've attached a screenshot.
I appreciate any insight you may be able to provide.
Thank you!
-Brandon
https://cdn.discordapp.com/attachments/1110655231638917272/1110655231785713714/WebAuthn_Prompt.pngβΎ
mammoth-midnight-7435
05/23/2023, 8:30 PMimportant-noon-13871
05/24/2023, 4:10 AMquiet-dream-68129
05/24/2023, 10:35 AM