在Cypress测试中，是否可以在before中设置变量，并在beforeEach中设置引用

Question

我正在为一个场景编写一个自动化测试。目前，新api的后端尚未构建，但新体验前端的模块正在运行。我想为新体验编写一个测试，以便在我们切换到新api时做好准备。新的api具有足够的功能，可以通过jwt令牌进行身份验证，并在控制台中显示验证。我遇到的问题是它有效，但效率不高。

目前，我正在使用beforeEach((块通过POST请求获得授权的jwt令牌。从那里获取的访问令牌用于转到url，然后在会话存储中设置该令牌。之后，加载具有预期内容的页面。

在上下文块中，我验证每个页面的期望值(这个特定的测试流有3个(。我想让它只点击API并返回jwt令牌一次，然后每次加载浏览器时都可以调用该jwt令牌。

我尝试过的东西：

• 制作一个before((部分来创建jwt令牌。在beforeEach部分中引用。结果为referenceError，oc_token未定义
• 尝试let而不是const；与上述结果相同
• 而不是const；使用response.body.access_token.invoke('oc_token'(.as('oc_token'；响应类型错误-response.body.access.invoke不是函数
• 将变量设置为cy.wrap(response.body.access_token(.as('oc_token'(；调用为this.oc_token；响应为TypeError无法读取未定义的属性(读取"oc_token"(
• 将变量设置为cy.fixture(response.body.access_token(.as('oc_token'(；以this.oc_token或oc_toke的形式调用。结果是错误ENABLETOOLING：名称太长

测试文件的当前结构：

describe('New experience test', () => {
beforeEach(() => {
cy.interceptFeatureFlags({
'new-experience-feature-flags': true
})
cy.visit(Cypress.config('baseUrl'));
cy.window().then(w => {
cy.request({
method: 'POST',
url: 'yadda',
headers: 'stuff',
body: { payload }
}).then((response) => {
expect.(response).property('status').to.equal(200)
const oc_token = response.body.access_token;
w.sessionStorage.setItem(
'jwt',
oc_token
)
w.sessionStorage.setItem(
'other_jwt',
oc_token
)
})
});
cy.fixture('new_experience_context.json').then((context) => {
button(cy).click();
});
});
context('first page', () => {
it('shows condition', () => {
thing.should('exist');
});
context('second page', () => {
beforeEach(() => {
//steps that get to the second page
});
it('shows condition', () => {
thing.should('exist');
});
});
context('third page', () => {
beforeEach(() => {
//steps that get to the second page
//steps that get to the third page
});
it('shows condition', () => {
thing.should('exist');
});
});
});
//functions that identify things in the DOM

我尝试过的结构：

describe('New experience test', () => {
before(() => {
cy.request({
method: 'POST',
url: 'yadda',
headers: 'stuff',
body: { payload }
}).then((response) => {
expect.(response).property('status').to.equal(200)
const oc_token = response.body.access_token;
});
beforeEach(() => {
cy.interceptFeatureFlags({
'new-experience-feature-flags': true
})
cy.visit(Cypress.config('baseUrl'));
cy.window().then(w => {
w.sessionStorage.setItem(
'jwt',
oc_token
)
w.sessionStorage.setItem(
'other_jwt',
oc_token
)
})
});
cy.fixture('new_experience_context.json').then((context) => {
button(cy).click();
});
});

Answer 1

如果我读对了，你可以通过在外部上下文中声明变量来做到这一点，变量将是一个"闭包"；变量

describe('New experience test', () => {
let oc_token;
before(() => {
cy.request({...}).then((response) => {
oc_token = response.body.access_token; // set outer ("closure") variable
})
});
beforeEach(() => {
cy.interceptFeatureFlags({...})
cy.visit('/')                 // uses baseUrl from config
.then(w => {
w.sessionStorage.setItem('jwt', oc_token)
w.sessionStorage.setItem('other_jwt', oc_token)
})
...
})
})

您可能遇到的唯一问题是Cypress是否重置浏览器，但如果您正在访问配置中设置的baseUrl，则不太可能。

还有其他方法，如alias

describe('New experience test', () => {
before(() => {
cy.request({...}).then((response) => {
cy.wrap(response.body.access_token).as('oc_token');  // alias variable
})
});
beforeEach(() => {
cy.interceptFeatureFlags({...})
cy.visit('/')                 // uses baseUrl from config
.then(w => {
cy.get('@oc_token').then(oc_token => {     // retrieve alias value
w.sessionStorage.setItem('jwt', oc_token)
w.sessionStorage.setItem('other_jwt', oc_token)
})
})
...
})
})

或环境变量

describe('New experience test', () => {
before(() => {
cy.request({...}).then((response) => {
Cypress.env('oc_token', response.body.access_token); // env variable
})
});
beforeEach(() => {
cy.interceptFeatureFlags({...})
cy.visit('/')                 // uses baseUrl from config
.then(w => {
w.sessionStorage.setItem('jwt', Cypress.env('oc_token'))
w.sessionStorage.setItem('other_jwt', Cypress.env('oc_token'))
})
...
})
})